@oussemasahbeni/keycloakify-login-shadcn 250004.0.2 → 250004.0.7

package/keycloak-theme/components/ui/alert.tsx

@@ -38,13 +38,13 @@ const Alert = React.forwardRef<
         <div className="flex items-start gap-3">
             {showIcon && (
                 <>
-                    {variant === "info" && <Info className="h-5 w-5 flex-shrink-0" />}
-                    {variant === "error" && <XCircle className="h-5 w-5 flex-shrink-0" />}
+                    {variant === "info" && <Info className="h-5 w-5 shrink-0" />}
+                    {variant === "error" && <XCircle className="h-5 w-5 shrink-0" />}
                     {variant === "warning" && (
-                        <AlertTriangle className="h-5 w-5 flex-shrink-0" />
+                        <AlertTriangle className="h-5 w-5 shrink-0" />
                     )}
                     {variant === "success" && (
-                        <MdCheckCircle className="h-5 w-5 flex-shrink-0" />
+                        <MdCheckCircle className="h-5 w-5 shrink-0" />
                     )}
                 </>
             )}

package/keycloak-theme/components/ui/dropdown-menu.tsx

@@ -44,7 +44,7 @@ const DropdownMenuSubContent = React.forwardRef<
     <DropdownMenuPrimitive.SubContent
         ref={ref}
         className={cn(
-            "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+            "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
             className
         )}
         {...props}
@@ -61,7 +61,7 @@ const DropdownMenuContent = React.forwardRef<
             ref={ref}
             sideOffset={sideOffset}
             className={cn(
-                "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+                "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
                 "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
                 className
             )}
@@ -80,7 +80,7 @@ const DropdownMenuItem = React.forwardRef<
     <DropdownMenuPrimitive.Item
         ref={ref}
         className={cn(
-            "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+            "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
             inset && "pl-8",
             className
         )}
@@ -96,7 +96,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     <DropdownMenuPrimitive.CheckboxItem
         ref={ref}
         className={cn(
-            "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
             className
         )}
         checked={checked}
@@ -119,7 +119,7 @@ const DropdownMenuRadioItem = React.forwardRef<
     <DropdownMenuPrimitive.RadioItem
         ref={ref}
         className={cn(
-            "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
             className
         )}
         {...props}

package/keycloak-theme/components/ui/input.tsx

@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
                 type={type}
                 className={cn(
                     "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-                    "group-[[data-invalid=true]]/field:border-destructive group-[[data-invalid=true]]/field:focus-visible:ring-destructive",
+                    "group-data-[invalid=true]/field:border-destructive group-data-[invalid=true]/field:focus-visible:ring-destructive",
                     "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
                     className
                 )}

package/keycloak-theme/components/ui/select.tsx

@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
     <SelectPrimitive.Trigger
         ref={ref}
         className={cn(
-            "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+            "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
             className
         )}
         {...props}
@@ -66,7 +66,7 @@ const SelectContent = React.forwardRef<
         <SelectPrimitive.Content
             ref={ref}
             className={cn(
-                "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+                "relative z-50 max-h-[--radix-select-content-available-height] min-w-32 overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
                 position === "popper" &&
                 "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
                 className
@@ -79,7 +79,7 @@ const SelectContent = React.forwardRef<
                 className={cn(
                     "p-1",
                     position === "popper" &&
-                    "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+                    "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
                 )}
             >
                 {children}
@@ -109,7 +109,7 @@ const SelectItem = React.forwardRef<
     <SelectPrimitive.Item
         ref={ref}
         className={cn(
-            "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
             className
         )}
         {...props}

package/keycloak-theme/components/ui/separator.tsx

@@ -15,7 +15,7 @@ const Separator = React.forwardRef<
         orientation={orientation}
         className={cn(
             "shrink-0 bg-border",
-            orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+            orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
             className
         )}
         {...props}

package/keycloak-theme/login/KcContext.ts

@@ -1,19 +1,23 @@
-import {
-    type ExtendKcContext,
-    createUseKcContext
-} from "@keycloakify/login-ui/KcContext";
-import type { KcEnvName, ThemeName } from "../kc.gen";
-
-export type KcContextExtension = {
-    themeName: ThemeName;
-    properties: Record<KcEnvName, string> & {};
-    // NOTE: Here you can declare more properties to extend the KcContext
-    // See: https://docs.keycloakify.dev/faq-and-help/some-values-you-need-are-missing-from-in-kccontext
-};
-
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export type KcContextExtensionPerPage = {};
-
-export type KcContext = ExtendKcContext<KcContextExtension, KcContextExtensionPerPage>;
-
-export const { useKcContext, KcContextProvider } = createUseKcContext<KcContext>();
+import {
+    type ExtendKcContext,
+    createUseKcContext
+} from "@keycloakify/login-ui/KcContext";
+import type { KcEnvName, ThemeName } from "../kc.gen";
+
+export type KcContextExtension = {
+    themeName: ThemeName;
+    properties: Record<KcEnvName, string> & {};
+    // NOTE: Here you can declare more properties to extend the KcContext
+    // See: https://docs.keycloakify.dev/faq-and-help/some-values-you-need-are-missing-from-in-kccontext
+    client: {
+        baseUrl?: string;
+    };
+    darkMode?: boolean;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export type KcContextExtensionPerPage = {};
+
+export type KcContext = ExtendKcContext<KcContextExtension, KcContextExtensionPerPage>;
+
+export const { useKcContext, KcContextProvider } = createUseKcContext<KcContext>();

package/keycloak-theme/login/KcPage.tsx

@@ -1,60 +1,47 @@
-import { ThemeProvider } from '@/components/theme-provider';
-import { useExclusiveAppInstanceEffect } from "@keycloakify/login-ui/tools/useExclusiveAppInstanceEffect";
-import { KcClsxProvider } from "@keycloakify/login-ui/useKcClsx";
-import type { ReactNode } from "react";
-import { assert } from "tsafe/assert";
-import { type KcContext, KcContextProvider } from "./KcContext";
-import { I18nProvider } from "./i18n";
-import "./index.css";
-import { PageIndex } from "./pages/PageIndex";
-import { useStyleLevelCustomization } from "./styleLevelCustomization";
-
-
-export default function KcPage(props: { kcContext: KcContext }) {
-    const { kcContext } = props;
-
-    const defaultTheme = (): "light" | "dark" | "system" => {
-        if (kcContext.properties.ENABLE_THEME_TOGGLE !== "true") {
-            // If theme toggle is disabled, use the default os theme setting
-            return window.matchMedia &&
-                window.matchMedia("(prefers-color-scheme: dark)").matches
-                ? "dark"
-                : "light";
-        }
-        return "system";
-    };
-
-    return (
-        <KcContextProvider kcContext={kcContext}>
-            <I18nProvider kcContext={kcContext}>
-                <StyleLevelCustomization>
-                    <ThemeProvider defaultTheme={defaultTheme()} storageKey="theme">
-                        <PageIndex />
-                    </ThemeProvider>
-
-                </StyleLevelCustomization>
-            </I18nProvider>
-        </KcContextProvider>
-    );
-}
-
-function StyleLevelCustomization(props: { children: ReactNode }) {
-    const { children } = props;
-
-    const { doUseDefaultCss, classes, loadCustomStylesheet, Provider } = useStyleLevelCustomization();
-
-    useExclusiveAppInstanceEffect({
-        effectId: "loadCustomStylesheet",
-        isEnabled: loadCustomStylesheet !== undefined,
-        effect: () => {
-            assert(loadCustomStylesheet !== undefined);
-            loadCustomStylesheet();
-        }
-    });
-
-    return (
-        <KcClsxProvider doUseDefaultCss={doUseDefaultCss} classes={classes}>
-            {Provider === undefined ? children : <Provider>{children}</Provider>}
-        </KcClsxProvider>
-    );
-}
+import { useExclusiveAppInstanceEffect } from "@keycloakify/login-ui/tools/useExclusiveAppInstanceEffect";
+import { KcClsxProvider } from "@keycloakify/login-ui/useKcClsx";
+import type { ReactNode } from "react";
+import { assert } from "tsafe/assert";
+import { type KcContext, KcContextProvider } from "./KcContext";
+import { I18nProvider } from "./i18n";
+import "./index.css";
+import { PageIndex } from "./pages/PageIndex";
+import { useStyleLevelCustomization } from "./styleLevelCustomization";
+
+
+
+
+export default function KcPage(props: { kcContext: KcContext }) {
+    const { kcContext } = props;
+
+    return (
+        <KcContextProvider kcContext={kcContext}>
+            <I18nProvider kcContext={kcContext}>
+                <StyleLevelCustomization>
+                    <PageIndex />
+                </StyleLevelCustomization>
+            </I18nProvider>
+        </KcContextProvider>
+    );
+}
+
+function StyleLevelCustomization(props: { children: ReactNode }) {
+    const { children } = props;
+
+    const { doUseDefaultCss, classes, loadCustomStylesheet, Provider } = useStyleLevelCustomization();
+
+    useExclusiveAppInstanceEffect({
+        effectId: "loadCustomStylesheet",
+        isEnabled: loadCustomStylesheet !== undefined,
+        effect: () => {
+            assert(loadCustomStylesheet !== undefined);
+            loadCustomStylesheet();
+        }
+    });
+
+    return (
+        <KcClsxProvider doUseDefaultCss={doUseDefaultCss} classes={classes}>
+            {Provider === undefined ? children : <Provider>{children}</Provider>}
+        </KcClsxProvider>
+    );
+}

package/keycloak-theme/login/assets/img/auth-logo.svg

@@ -1,101 +1,101 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M0 12.6316C0 5.65535 5.65535 0 12.6316 0H35.3684C42.3446 0 48 5.65535 48 12.6316V35.3684C48 42.3446 42.3446 48 35.3684 48H12.6316C5.65535 48 0 42.3446 0 35.3684V12.6316Z"
-        fill="#465FFF" />
-    <path
-        d="M0 12.6316C0 5.65535 5.65535 0 12.6316 0H35.3684C42.3446 0 48 5.65535 48 12.6316V35.3684C48 42.3446 42.3446 48 35.3684 48H12.6316C5.65535 48 0 42.3446 0 35.3684V12.6316Z"
-        fill="#465FFF" />
-    <g filter="url(#filter0_d_0_1)">
-        <path
-            d="M12.6357 12.6323C12.6357 11.237 13.7668 10.106 15.162 10.106C16.5573 10.106 17.6884 11.237 17.6884 12.6323V35.3691C17.6884 36.7644 16.5573 37.8954 15.162 37.8954C13.7668 37.8954 12.6357 36.7644 12.6357 35.3691V12.6323Z"
-            fill="white" />
-    </g>
-    <g filter="url(#filter1_d_0_1)">
-        <path
-            d="M22.1133 22.7353C22.1133 21.3401 23.2443 20.209 24.6396 20.209C26.0348 20.209 27.1659 21.3401 27.1659 22.7353V35.3669C27.1659 36.7621 26.0348 37.8932 24.6396 37.8932C23.2443 37.8932 22.1133 36.7621 22.1133 35.3669V22.7353Z"
-            fill="white" fill-opacity="0.9" />
-    </g>
-    <path
-        d="M0 12.6316C0 5.65535 5.65535 0 12.6316 0H35.3684C42.3446 0 48 5.65535 48 12.6316V35.3684C48 42.3446 42.3446 48 35.3684 48H12.6316C5.65535 48 0 42.3446 0 35.3684V12.6316Z"
-        fill="#465FFF" />
-    <path
-        d="M0 12.6316C0 5.65535 5.65535 0 12.6316 0H35.3684C42.3446 0 48 5.65535 48 12.6316V35.3684C48 42.3446 42.3446 48 35.3684 48H12.6316C5.65535 48 0 42.3446 0 35.3684V12.6316Z"
-        fill="#465FFF" />
-    <g filter="url(#filter2_d_0_1)">
-        <path
-            d="M12.6357 12.6323C12.6357 11.237 13.7668 10.106 15.162 10.106C16.5573 10.106 17.6884 11.237 17.6884 12.6323V35.3691C17.6884 36.7644 16.5573 37.8954 15.162 37.8954C13.7668 37.8954 12.6357 36.7644 12.6357 35.3691V12.6323Z"
-            fill="white" />
-    </g>
-    <g filter="url(#filter3_d_0_1)">
-        <path
-            d="M22.1133 22.7353C22.1133 21.3401 23.2443 20.209 24.6396 20.209C26.0348 20.209 27.1659 21.3401 27.1659 22.7353V35.3669C27.1659 36.7621 26.0348 37.8932 24.6396 37.8932C23.2443 37.8932 22.1133 36.7621 22.1133 35.3669V22.7353Z"
-            fill="white" fill-opacity="0.9" />
-    </g>
-    <g filter="url(#filter4_d_0_1)">
-        <path
-            d="M31.582 16.4189C31.582 15.0236 32.7131 13.8926 34.1083 13.8926C35.5036 13.8926 36.6346 15.0236 36.6346 16.4189V35.3663C36.6346 36.7615 35.5036 37.8926 34.1083 37.8926C32.7131 37.8926 31.582 36.7615 31.582 35.3663V16.4189Z"
-            fill="white" fill-opacity="0.7" />
-    </g>
-    <defs>
-        <filter id="filter0_d_0_1" x="11.6357" y="9.60596" width="7.05267" height="29.7894" filterUnits="userSpaceOnUse"
-            color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix" />
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                result="hardAlpha" />
-            <feOffset dy="0.5" />
-            <feGaussianBlur stdDeviation="0.5" />
-            <feComposite in2="hardAlpha" operator="out" />
-            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
-            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_1" />
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_1" result="shape" />
-        </filter>
-        <filter id="filter1_d_0_1" x="21.1133" y="19.709" width="7.05261" height="19.6842" filterUnits="userSpaceOnUse"
-            color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix" />
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                result="hardAlpha" />
-            <feOffset dy="0.5" />
-            <feGaussianBlur stdDeviation="0.5" />
-            <feComposite in2="hardAlpha" operator="out" />
-            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
-            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_1" />
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_1" result="shape" />
-        </filter>
-        <filter id="filter2_d_0_1" x="11.6357" y="9.60596" width="7.05267" height="29.7894" filterUnits="userSpaceOnUse"
-            color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix" />
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                result="hardAlpha" />
-            <feOffset dy="0.5" />
-            <feGaussianBlur stdDeviation="0.5" />
-            <feComposite in2="hardAlpha" operator="out" />
-            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
-            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_1" />
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_1" result="shape" />
-        </filter>
-        <filter id="filter3_d_0_1" x="21.1133" y="19.709" width="7.05261" height="19.6842" filterUnits="userSpaceOnUse"
-            color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix" />
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                result="hardAlpha" />
-            <feOffset dy="0.5" />
-            <feGaussianBlur stdDeviation="0.5" />
-            <feComposite in2="hardAlpha" operator="out" />
-            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
-            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_1" />
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_1" result="shape" />
-        </filter>
-        <filter id="filter4_d_0_1" x="30.582" y="13.3926" width="7.05261" height="26" filterUnits="userSpaceOnUse"
-            color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix" />
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                result="hardAlpha" />
-            <feOffset dy="0.5" />
-            <feGaussianBlur stdDeviation="0.5" />
-            <feComposite in2="hardAlpha" operator="out" />
-            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
-            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_1" />
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_1" result="shape" />
-        </filter>
-    </defs>
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M0 12.6316C0 5.65535 5.65535 0 12.6316 0H35.3684C42.3446 0 48 5.65535 48 12.6316V35.3684C48 42.3446 42.3446 48 35.3684 48H12.6316C5.65535 48 0 42.3446 0 35.3684V12.6316Z"
+        fill="#465FFF" />
+    <path
+        d="M0 12.6316C0 5.65535 5.65535 0 12.6316 0H35.3684C42.3446 0 48 5.65535 48 12.6316V35.3684C48 42.3446 42.3446 48 35.3684 48H12.6316C5.65535 48 0 42.3446 0 35.3684V12.6316Z"
+        fill="#465FFF" />
+    <g filter="url(#filter0_d_0_1)">
+        <path
+            d="M12.6357 12.6323C12.6357 11.237 13.7668 10.106 15.162 10.106C16.5573 10.106 17.6884 11.237 17.6884 12.6323V35.3691C17.6884 36.7644 16.5573 37.8954 15.162 37.8954C13.7668 37.8954 12.6357 36.7644 12.6357 35.3691V12.6323Z"
+            fill="white" />
+    </g>
+    <g filter="url(#filter1_d_0_1)">
+        <path
+            d="M22.1133 22.7353C22.1133 21.3401 23.2443 20.209 24.6396 20.209C26.0348 20.209 27.1659 21.3401 27.1659 22.7353V35.3669C27.1659 36.7621 26.0348 37.8932 24.6396 37.8932C23.2443 37.8932 22.1133 36.7621 22.1133 35.3669V22.7353Z"
+            fill="white" fill-opacity="0.9" />
+    </g>
+    <path
+        d="M0 12.6316C0 5.65535 5.65535 0 12.6316 0H35.3684C42.3446 0 48 5.65535 48 12.6316V35.3684C48 42.3446 42.3446 48 35.3684 48H12.6316C5.65535 48 0 42.3446 0 35.3684V12.6316Z"
+        fill="#465FFF" />
+    <path
+        d="M0 12.6316C0 5.65535 5.65535 0 12.6316 0H35.3684C42.3446 0 48 5.65535 48 12.6316V35.3684C48 42.3446 42.3446 48 35.3684 48H12.6316C5.65535 48 0 42.3446 0 35.3684V12.6316Z"
+        fill="#465FFF" />
+    <g filter="url(#filter2_d_0_1)">
+        <path
+            d="M12.6357 12.6323C12.6357 11.237 13.7668 10.106 15.162 10.106C16.5573 10.106 17.6884 11.237 17.6884 12.6323V35.3691C17.6884 36.7644 16.5573 37.8954 15.162 37.8954C13.7668 37.8954 12.6357 36.7644 12.6357 35.3691V12.6323Z"
+            fill="white" />
+    </g>
+    <g filter="url(#filter3_d_0_1)">
+        <path
+            d="M22.1133 22.7353C22.1133 21.3401 23.2443 20.209 24.6396 20.209C26.0348 20.209 27.1659 21.3401 27.1659 22.7353V35.3669C27.1659 36.7621 26.0348 37.8932 24.6396 37.8932C23.2443 37.8932 22.1133 36.7621 22.1133 35.3669V22.7353Z"
+            fill="white" fill-opacity="0.9" />
+    </g>
+    <g filter="url(#filter4_d_0_1)">
+        <path
+            d="M31.582 16.4189C31.582 15.0236 32.7131 13.8926 34.1083 13.8926C35.5036 13.8926 36.6346 15.0236 36.6346 16.4189V35.3663C36.6346 36.7615 35.5036 37.8926 34.1083 37.8926C32.7131 37.8926 31.582 36.7615 31.582 35.3663V16.4189Z"
+            fill="white" fill-opacity="0.7" />
+    </g>
+    <defs>
+        <filter id="filter0_d_0_1" x="11.6357" y="9.60596" width="7.05267" height="29.7894" filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                result="hardAlpha" />
+            <feOffset dy="0.5" />
+            <feGaussianBlur stdDeviation="0.5" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_1" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_1" result="shape" />
+        </filter>
+        <filter id="filter1_d_0_1" x="21.1133" y="19.709" width="7.05261" height="19.6842" filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                result="hardAlpha" />
+            <feOffset dy="0.5" />
+            <feGaussianBlur stdDeviation="0.5" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_1" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_1" result="shape" />
+        </filter>
+        <filter id="filter2_d_0_1" x="11.6357" y="9.60596" width="7.05267" height="29.7894" filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                result="hardAlpha" />
+            <feOffset dy="0.5" />
+            <feGaussianBlur stdDeviation="0.5" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_1" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_1" result="shape" />
+        </filter>
+        <filter id="filter3_d_0_1" x="21.1133" y="19.709" width="7.05261" height="19.6842" filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                result="hardAlpha" />
+            <feOffset dy="0.5" />
+            <feGaussianBlur stdDeviation="0.5" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_1" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_1" result="shape" />
+        </filter>
+        <filter id="filter4_d_0_1" x="30.582" y="13.3926" width="7.05261" height="26" filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                result="hardAlpha" />
+            <feOffset dy="0.5" />
+            <feGaussianBlur stdDeviation="0.5" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_1" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_1" result="shape" />
+        </filter>
+    </defs>
 </svg>