enr 0.2.3-alpha.2

package/customHooks/useRipples/rippersData/useOptions.d.ts

@@ -0,0 +1,91 @@
+/**
+ * @license MIT
+ * earthnut@customHooks/useRipples/rippersData/useOptions.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+import { ImageCrossOrigin, RippleImgUrl, RipplesUseOptions } from '../types';
+/** 用户使用参数  */
+export declare class UseOptions {
+    #private;
+    /**  倍级触发光标事件  */
+    set accelerating(value: number);
+    /**
+     * 倍级触发光标事件
+     */
+    get accelerating(): number;
+    /**  是否与鼠标互动  */
+    set interactive(value: boolean);
+    /**
+     * 是否与鼠标互动
+     */
+    get interactive(): boolean;
+    /**  分辨率
+     *
+     * 纹理的尺寸，该项目中该值为纹理的宽和高
+     *
+     */
+    set resolution(value: number);
+    /**
+     * 纹理的尺寸，该项目中该值为纹理的宽和高
+     */
+    get resolution(): number;
+    /**
+     * 扰动系数
+     *
+     * 缺省 `0.01`
+     *
+     * 取之范围 `0.01 - 1`
+     */
+    set perturbance(value: number);
+    /**
+     * 扰动系数
+     */
+    get perturbance(): number;
+    /**
+     * 扩散半径
+     *
+     * 缺省为 `20`
+     */
+    set dropRadius(value: number);
+    /**
+     * 扩散半径
+     */
+    get dropRadius(): number;
+    /**  传入的背景图片  */
+    imgUrl: RippleImgUrl;
+    /**  闲置波动  */
+    set idleFluctuations(value: boolean);
+    /**
+     * 闲置波动
+     */
+    get idleFluctuations(): boolean;
+    /**  雨滴落下的时间间隔  */
+    set raindropsTimeInterval(value: number);
+    /**
+     * 雨滴落下的时间间隔
+     */
+    get raindropsTimeInterval(): number;
+    /**  crossOrigin  （是否跨域） */
+    crossOrigin: ImageCrossOrigin;
+    /**  canvas 的显隐  */
+    visible: boolean;
+    /**  当前执行的状态  */
+    running: boolean;
+    /**  当前执行的状态  */
+    set playingState(value: boolean);
+    /**
+     * 当前执行的状态
+     */
+    get playingState(): boolean;
+    /**  当前时候为暗黑模式  */
+    get darkMode(): boolean | undefined;
+    /**  当前时候为暗黑模式  */
+    set darkMode(value: boolean | undefined);
+    /**  上一次执行渲染状态  */
+    lastRunningState: boolean;
+    /**
+     * 构建使用参数的数据
+     */
+    constructor(options: RipplesUseOptions);
+}

package/customHooks/useRipples/rippersData/vertexSource.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license MIT
+ * earthnut@customHooks/useRipples/rippersData/vertexSource.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+/**
+ *
+ */
+export declare const vertexShader = "\n      attribute vec2 vertex;\n      varying vec2 coord;\n      void main() {\n        coord = vertex * 0.5 + 0.5;\n        gl_Position = vec4(vertex, 0.0, 1.0);\n      }";
+/**
+ *
+ *
+ *
+ */
+export declare const updateProgramFragmentSource = "\n      precision highp float;\n\n      uniform sampler2D texture;\n      uniform vec2 delta;\n\n      varying vec2 coord;\n\n      void main() {\n        vec4 info = texture2D(texture, coord);\n  \n        vec2 dx = vec2(delta.x, 0.0);\n        vec2 dy = vec2(0.0, delta.y);\n  \n        float average = (\n          texture2D(texture, coord - dx).r +\n          texture2D(texture, coord - dy).r +\n          texture2D(texture, coord + dx).r +\n          texture2D(texture, coord + dy).r\n        ) * 0.25;\n  \n        info.g += (average - info.r) * 2.0;\n        info.g *= 0.995;\n        info.r += info.g;\n  \n        gl_FragColor = info;\n      }\n      ";
+/**
+ *
+ *
+ *
+ */
+export declare const renderVertexSource = "\n        precision highp float;\n\n        attribute vec2 vertex;\n        uniform vec2 topLeft;\n        uniform vec2 bottomRight;\n        uniform vec2 containerRatio;\n        varying vec2 ripplesCoord;\n        varying vec2 backgroundCoord;\n        void main() {\n          backgroundCoord = mix(topLeft, bottomRight, vertex * 0.5 + 0.5);\n          backgroundCoord.y = 1.0 - backgroundCoord.y;\n          ripplesCoord = vec2(vertex.x, -vertex.y) * containerRatio * 0.5 + 0.5;\n          gl_Position = vec4(vertex.x, -vertex.y, 0.0, 1.0);\n        }\n      ";
+/**
+ *
+ *
+ *
+ */
+export declare const renderProgramFragmentSource = "\n        precision highp float;\n\n        uniform sampler2D samplerBackground;\n        uniform sampler2D samplerRipples;\n        uniform vec2 delta;\n\n        uniform float perturbance;\n        varying vec2 ripplesCoord;\n        varying vec2 backgroundCoord;\n\n        void main() {\n          float height = texture2D(samplerRipples, ripplesCoord).r;\n          float heightX = texture2D(samplerRipples, vec2(ripplesCoord.x + delta.x, ripplesCoord.y)).r;\n          float heightY = texture2D(samplerRipples, vec2(ripplesCoord.x, ripplesCoord.y + delta.y)).r;\n          vec3 dx = vec3(delta.x, heightX - height, 0.0);\n          vec3 dy = vec3(0.0, heightY - height, delta.y);\n          vec2 offset = -normalize(cross(dy, dx)).xz;\n          float specular = pow(max(0.0, dot(offset, normalize(vec2(-0.6, 1.0)))), 4.0);\n          gl_FragColor = texture2D(samplerBackground, backgroundCoord + offset * perturbance) + specular;\n        }";
+/**
+ *
+ * fragmentSource
+ *
+ */
+export declare const dropProgramFragmentSource = "precision highp float;\n\n      const float PI = 3.141592653589793;\n      uniform sampler2D texture;\n      uniform vec2 center;\n      uniform float radius;\n      uniform float strength;\n\n      varying vec2 coord;\n\n      void main() {\n        vec4 info = texture2D(texture, coord);\n\n        float drop = max(0.0, 1.0 - length(center * 0.5 + 0.5 - coord) / radius);\n        drop = 0.5 - cos(drop * PI) * 0.5;\n        info.r += drop * strength;\n        gl_FragColor = info;\n      }";

package/customHooks/useRipples/ripple.html.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license MIT
+ * earthnut@customHooks/useRipples/ripple.html.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+import { Ripples } from './ripplesClass';
+import { RipplesOptions } from './types';
+/**
+ * ripple 的 html 导出，不依赖于 react
+ */
+export declare function useRipples(element: HTMLElement, options: RipplesOptions): Ripples;

package/customHooks/useRipples/ripplesClass.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @license MIT
+ * earthnut@customHooks/useRipples/ripplesClass.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+import { RipplesData } from './rippersData';
+import { RipplesOptions } from './types';
+import { RipplesRenderData } from './rippersData/renderData';
+import { UseOptions } from './rippersData/useOptions';
+import { FadeData } from './rippersData/fadeData';
+/**
+ *
+ * ## 水波动涟漪的效果
+ *
+ * 魔改自大佬的[jQuey 代码](https://github.com/sirxemic/jquery.ripples)
+ */
+export declare class Ripples extends RipplesData {
+    #private;
+    /**  渲染数据  */
+    renderData: RipplesRenderData | null;
+    /**  使用参数  */
+    options: UseOptions;
+    /**  背景使用的数据  */
+    fadeData: FadeData;
+    defaults: import("./types").RipplesDefaultData;
+    /**  初始化状态  */
+    initialized: boolean;
+    /**
+     * 构建 Ripple 对象
+     */
+    constructor(canvas: HTMLCanvasElement, options?: RipplesOptions);
+    /** 模拟雨滴下落  */
+    raindropsFall(): void;
+    /** 公共方法，触发 */
+    drop(x: number, y: number, radius: number, strength: number): void;
+    /**
+     * 缓进缓出
+     */
+    fade(): void;
+    /** 元素的尺寸发生变化  */
+    reloadBackground(): void;
+    /**  销毁  */
+    destroy(): void;
+    /**  展示元素 */
+    show(): void;
+    /** 隐藏元素 */
+    hide(): void;
+    /** 暂停动画涟漪状态   */
+    pause(): void;
+    /**  播放动画涟漪状态  */
+    play(): void;
+    /** 切换当前状态   */
+    changePlayingState(): void;
+    /**  给初始化变量赋值  */
+    set(property: keyof RipplesOptions, value: unknown): void;
+}

package/customHooks/useRipples/tools.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @license MIT
+ * earthnut@customHooks/useRipples/tools.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+/****************************************************************************
+ * @Author earthnut
+ * @Email earthnut.dev@outlook.com
+ * @ProjectName website
+ * @FileName tools.ts
+ * @CreateDate  周六  12/07/2024
+ * @Description  工具
+ ****************************************************************************/
+import { Ripples } from './ripplesClass';
+import { Program } from './types';
+/**
+ *
+ *  增加 WebGLProgram
+ *
+ *
+ */
+export declare function createProgram(vertexSource: string, fragmentSource: string, gl: WebGLRenderingContext, _uniformValues?: string): Program;
+/**
+ *
+ * 绑定纹理
+ *
+ */
+export declare function bindTexture(this: Ripples, texture: WebGLTexture, unit?: number): void;
+/**
+ * 给 canvas 设置样式
+ */
+export declare function setCanvasStyle(canvas: HTMLCanvasElement): void;
+/**  背景色值为空  */
+export declare function isNoneBackGroundColor(color: string): boolean;
+/**  背景图为空  */
+export declare function isNoneBackgroundImage(src: string): boolean;

package/customHooks/useRipples/types.d.ts

@@ -0,0 +1,209 @@
+/**
+ * @license MIT
+ * earthnut@customHooks/useRipples/types.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+/****************************************************************************
+ * @Author earthnut
+ * @Email earthnut.dev@outlook.com
+ * @ProjectName react-ripples
+ * @FileName interface.ts
+ * @CreateDate  周二  12/17/2024
+ * @Description BackgroundRipples 的类型声明文件
+ ****************************************************************************/
+import { HTMLAttributes } from 'react';
+export type ImageCrossOrigin = 'anonymous' | 'use-credentials' | 'no-cors';
+/**
+ *
+ *  背景涟漪的 props 类型
+ *
+ * - children  可选属性，定义子组件或子组件们
+ * - style     可选属性，定义自定义外壳的样式，在内含 `children` 时生效
+ * - option    可选属性，自定义涟漪的初始化属性
+ *    - resolution 分辨率,纹理的尺寸，该项目中该值为纹理的宽和高，缺省为 `256`
+ *    - dropRadius 扩撒半径，缺省值为 `20`
+ *    - perturbance 扰动系数，缺省为   `0.03`
+ *    - interactive 光标交互，缺省为 `true` ，关闭须显示传入 `false` 值
+ *    - accelerating  加速光标移动触发，缺省为 `1`
+ *    - crossOrigin 原始样式
+ *    - imgUrl    原始背景图片地址
+ *    - playingState 当前的播放状态，缺省为 `true` ，设定为 `false` 时并不关闭，而是暂停
+ *    - raindropsTimeInterval 雨滴滴落的间隔，缺省为 `3600`，可设置区间为 `10 ~ 12000`
+ *           该值还将影响无背景设置时默认背景的切换频率，几乎每两个雨滴落下就会切换一次背景
+ *    - idleFluctuations  闲置波动，在光标交互不触发时，将触发模拟雨滴，缺省为 `true`
+ *    - darkMode 暗黑模式，仅用于在默认的背景图时更改默认背景图的背景色，如果使用了 `imgUrl` 配置，请执行处理色差异常
+ *
+ */
+export type BackgroundRipplesProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * ## 可设定涟漪的参数
+     *
+     * - resolution  波速，值越小，波动越快。缺省为 `360`
+     * - dropRadius  波动强度，值越小，波动效果越大，缺省值为 `12`
+     * - perturbance 扰动系数，值越大，对原背景造成干涉越强，缺省为   `0.01`
+     * - interactive 光标交互，缺省为 `true` ，关闭须显示传入 `false` 值
+     * - accelerating  加速光标移动触发，类似于扰动系数，及作用与鼠标或手指触发，缺省为 `1`
+     * - crossOrigin 原始样式
+     * - imgUrl    原始背景图片地址
+     * - playingState 当前的播放状态，缺省为 `true` ，设定为 `false` 时并不关闭，而是暂停
+     * - raindropsTimeInterval 雨滴滴落的间隔，缺省为 `3650`，可设置区间为 `10 ~ 12000`，值越小，雨越大
+     *   该值还将影响无背景设置时默认背景的切换频率，几乎每两个雨滴落下就会切换一次背景
+     * - idleFluctuations  闲置波动，在光标交互不触发时，将触发模拟雨滴，缺省为 `true`
+     * - darkMode 暗黑模式，仅用于在默认的背景图时更改默认背景图的背景色，如果使用了 `imgUrl` 配置，请执行处理色差异常
+     */
+    option?: RipplesOptions;
+};
+/**
+ *
+ * WebGLProgram
+ *
+ */
+export interface Program {
+    id: WebGLProgram;
+    uniforms: {
+        [x: string]: Float32Array;
+    };
+    locations: {
+        [x: string]: WebGLUniformLocation;
+    };
+}
+/**
+ * 设定的元素背景的 url 地址
+ *
+ * 缺省为 `null`
+ */
+export type RippleImgUrl = string | string[] | null;
+export type RipplesUseOptions = {
+    /**
+     * 波速
+     *
+     * 作用为波传播的速度，值越大，波传播的越慢
+     *
+     * 缺省为 `360`
+     */
+    resolution: number;
+    /**
+     * 波动强度
+     *
+     * 值越小，波动越明显
+     *
+     * 缺省为 `12`
+     */
+    dropRadius: number;
+    /**
+     * 扰动系数
+     *
+     * 缺省 `0.01`
+     *
+     * 取之范围 `0.01 - 1`
+     *
+     * 值越大，扰动效果越明显
+     */
+    perturbance: number;
+    /**
+     * 是否开启光标滑动轨迹
+     *
+     * 缺省为  `true`
+     */
+    interactive: boolean;
+    /**
+     * 加速光标移动触发，缺省为 `1`
+     *
+     *
+     * 由于大佬原方法在光标触发 mousemove 时不怎么明显
+     *
+     * 所以以倍级触发会让波动更加明显
+     *
+     * 可设置区间为 `2 - 100`
+     */
+    accelerating: number;
+    /**
+     *  原设定的背景图片
+     *
+     * 缺省为 `''`
+     */
+    crossOrigin: ImageCrossOrigin;
+    /**
+     * 设定的元素背景的 url 地址
+     *
+     * 缺省为 `null`
+     */
+    imgUrl: RippleImgUrl;
+    /**
+     * 当前涟漪的状态
+     *
+     * 缺省为 `true` ， 即涟漪触发正在执行
+     */
+    playingState: boolean;
+    /**
+     * 雨滴滴落的时间间隔
+     *
+     * 单位为 ms
+     *
+     * 缺省值为 `3600`
+     *
+     *
+     * 可设置区间为 `10 ~ 12000`
+     *
+     *   该值还将影响无背景设置时默认背景的切换频率，几乎每两个雨滴落下就会切换一次背景
+     */
+    raindropsTimeInterval: number;
+    /**
+     * 闲置波动
+     *
+     * 在光标交互不触发时，将触发模拟雨滴
+     *
+     * 缺省为 `true`
+     */
+    idleFluctuations: boolean;
+    /**
+     *  是否为暗黑模式
+     *
+     *  在使用默认的主题设置时，当页面使用暗黑模式时出现了文本看不清的现象
+     *
+     */
+    darkMode: boolean | undefined;
+};
+/**
+ *
+ * 涟漪设定参数
+ *
+ * - resolution 分波速，值越小，波动越快。缺省为 `360`
+ * - dropRadius 波动强度，值越小，波动效果越大，缺省值为 `12`
+ * - perturbance 扰动系数，值越大，对原背景造成干涉越强，缺省为   `0.01`
+ * - interactive 光标交互，缺省为 `true` ，关闭须显示传入 `false` 值
+ * - accelerating  加速光标移动触发，类似于扰动系数，及作用与鼠标或手指触发，缺省为 `1`
+ * - crossOrigin 原始样式
+ * - imgUrl    原始背景图片地址
+ * - playingState 当前的播放状态，缺省为 `true` ，设定为 `false` 时并不关闭，而是暂停
+ * - raindropsTimeInterval 雨滴滴落的间隔，缺省为 `3650`，可设置区间为 `10 ~ 12000`，值越小，雨越大
+ *   该值还将影响无背景设置时默认背景的切换频率，几乎每两个雨滴落下就会切换一次背景
+ * - idleFluctuations  闲置波动，在光标交互不触发时，将触发模拟雨滴，缺省为 `true`
+ * - darkMode 暗黑模式，仅用于在默认的背景图时更改默认背景图的背景色，如果使用了 `imgUrl` 配置，请执行处理色差异常
+ */
+export type RipplesOptions = {
+    [x in keyof RipplesUseOptions]?: RipplesUseOptions[x];
+};
+/**
+ * 初始默认值
+ */
+export interface RipplesDefaultData {
+    /**  默认的图像地址  */
+    imgUrl: null;
+    /**    */
+    resolution: 360;
+    dropRadius: 12;
+    perturbance: 0.01;
+    interactive: true;
+    crossOrigin: 'no-cors';
+    playingState: true;
+    accelerating: 1;
+    raindropsTimeInterval: 3600;
+    idleFluctuations: true;
+    darkMode: undefined;
+}
+/**
+ *
+ */
+export type Textures = WebGLTexture[];

package/customHooks/useRipples/use-lazy-ripple.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license MIT
+ * earthnut@customHooks/useRipples/use-lazy-ripple.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+import { RefObject } from 'react';
+import { Ripples } from './ripplesClass';
+import { RipplesOptions } from './types';
+/**  动态加载包含的自定义的钩子  */
+export declare function useLazyRipples(canvas: RefObject<HTMLCanvasElement | null>, option?: RipplesOptions): {
+    ripples: RefObject<Ripples | null>;
+    isLoading: boolean;
+    error: unknown;
+};

package/customHooks/useTimeId.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @license MIT
+ * earthnut@customHooks/useTimeId.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+/**
+ *
+ * ### 导出一个使用 `useRef` 创建的 `NodeJS.Timeout`
+ *
+ * 该数值在组件卸载时会自动调用 `clearTimeout` 清理
+ *
+ * @version 0.0.3
+ * @see   https://earthnut.dev/custom-hooks/use-time-id
+ * @example
+ *
+ * 使用：
+ *
+ * ```ts
+ *  // import { useTimeId } from 'earthnut';
+ *  ...
+ *  const timeoutId = useTimeId();
+ *
+ *  useEffect(()=>{
+ *      timeoutId.current = setTimeout(()=>{
+ *          ...
+ *      } ,delay);
+ *  });
+ *  ...
+ *
+ * ```
+ *
+ * 其实，正确的用法是这样的：
+ *
+ * ```ts
+ *
+ *  useEffect(()=>{
+ *    const timeId = setTimeout(()=>{
+ *        ...
+ *    }, delay) ;
+ *
+ *     return ()=> timeId && clearTimeout(timeId);
+ *  });
+ *
+ * ```
+ *
+ * 根本就不用引入这个自定义 `hook` , 哈哈哈哈哈
+ *
+ */
+export declare function useTimeId(): import("react").RefObject<NodeJS.Timeout | undefined>;

package/index.client.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license MIT
+ * earthnut@index.client.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+export { useLazyRipples } from './customHooks/useRipples/use-lazy-ripple';
+export { BackgroundRipple, LazyBackgroundRipple } from './components/ripples';
+export { useTimeId } from './customHooks/useTimeId';
+export { useAnimationFrame } from './customHooks/useAnimationFrame';
+export type { UseAnimationFrameResult, AnimationFrameOption, } from './customHooks/useAnimationFrame';
+export { useInputIsComposing } from './customHooks/useInputIsComposing';
+export { useRipples } from './customHooks/useRipples';
+export type { Ripples, BackgroundRipplesProps, RipplesOptions, RippleImgUrl, } from './customHooks/useRipples';
+export type { LayoutProps, LayoutSideBarProps, LayoutHeaderProps, LayoutFooterProps, } from './components/layout';
+export { Image, Image as EnImage } from './components/image';
+export type { EnImageProps } from './components/image';
+export { useColorMode, ThemeColorModeProvider } from './components/ThemeContext';
+export type { ColorMode, ThemeContextType, ThemeColorModeProviderProps, } from './components/ThemeContext/types';
+export { Switch, Switch as EnSwitch } from './components/switch';

package/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license MIT
+ * earthnut@index.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+export * from './index.client';
+export * from './index.server';

package/index.mjs

@@ -0,0 +1,3 @@
+
+export * from './client.mjs';
+export * from './server.mjs';

package/index.server.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license MIT
+ * earthnut@index.server.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+export { _en } from './customHooks/use-xcn';
+export { Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSideBar, EnLayout, EnLayoutContent, EnLayoutFooter, EnLayoutHeader, EnLayoutSideBar, } from './components/layout';

package/layoutUtil.mjs

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * earthnut@layoutUtil.mjs 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+
+"use client";
+import{css as n,styled as e}from"styled-components";var t,a,r,o,i,l,d,h,u,s,g,p,y,c,m,f,v,w,b,x,$,T,O,j,z,k,P,N,S,q,A,B={};function C(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}B.d=(n,e)=>{for(var t in e)B.o(e,t)&&!B.o(n,t)&&Object.defineProperty(n,t,{enumerable:!0,get:e[t]})},B.o=(n,e)=>Object.prototype.hasOwnProperty.call(n,e);var D=e.main(t||(t=C(["\n  grid-area: content;\n  position: relative;\n"]))),E=e.div(a||(a=C(["\n  grid-area: footer;\n  position: relative;\n  height: var(--layout-footer-height);\n  box-shadow: 0 -1px 13px 0px #0000001a;\n  overflow: hidden;\n"]))),F=e.nav(r||(r=C(["\n  grid-area: header;\n  position: sticky;\n  top: 0px;\n  left: 0px;\n  z-index: 10;\n  height: var(--layout-header-height);\n  box-shadow: 0 4px 13px -3px #0000001a;\n  overflow: hidden;\n"]))),G=e.aside(o||(o=C(["\n  position: sticky;\n  left: 0;\n  z-index: 8;\n  grid-area: side;\n  overflow-x: hidden;\n  overflow-y: auto;\n"]))),H=e.div(i||(i=C(["\n  position: relative;\n  grid-area: content;\n  overflow: auto;\n"]))),I=e.div(l||(l=C(["\n  position: relative;\n  top: 0px;\n  height: var(--layout-self-height);\n  width: var(--layout-self-width);\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  ","\n\n  ","\n\n  // 侧边栏全屏样式\n  ","\n\n  // ------------------------------\n  // --- 标准模式（全）与侧边栏右置（全）共用样式 ---\n  // 标准模式（全）与侧边栏右置（全）\n  ","\n\n  // 标准模式（全） 侧边栏与内容区设置\n  ","\n  // 侧边栏（全） 侧边栏与内容区设置\n  ","\n\n   // 侧边栏 (全) 左侧全屏\n   // side bar 居左全尺寸\n   // side bar 值由 en-layout-side-full 控制\n  ","\n  \n  // 标准的 side bar 居左全尺寸\n  ","\n\n  // side bar 居右全尺寸\n  ","\n  \n  // ------------------------------\n  // --- 标准模式（无 header）与侧边栏在右侧的无头模式共用样式 ---\n  // 标准的无头模式样式、侧边栏在右侧的无头模式样式\n  ","\n  \n  // 侧边栏（无 header ）全屏\n  // side bar 居左全尺寸\n  // side bar 值由 en-layout-side-full 控制\n  ","\n\n  // 标准的 side bar 居左全尺寸\n  ","\n\n  // side bar 居右全尺寸\n  ","\n  \n  // ------------------------------\n  // 标准模式（无 footer）与侧边栏右置（无 footer）共用样式\n  // 没有 footer\n  ","\n  \n\n  // 标准模式（无 footer） 侧边栏与内容区设置\n  ","\n\n\n// 侧边栏在右侧的无 footer 模式样式\n  ","\n\n// 侧边栏 (全) 左侧全屏\n// side bar 居左全尺寸\n// side bar 值由 en-layout-side-full 控制\n","\n\n// 标准的 side bar 居左全尺寸\n  ","\n\n\n  // side bar 居右全尺寸\n  ","\n  \n  // ------------------------------\n  // --- 分割线  --- \n  // 下面是仅头部、底部和侧边栏布局\n  // 仅底部布局\n  ","\n\n  // 仅头部布局\n  ","\n  \n  // 仅侧边布局\n// 标准的无头模式样式、侧边栏在右侧的无头模式样式\n// side bar 值由 en-layout-side-full 控制\n  ","\n  \n  // 右侧侧边布局\n  ","\n"])),function(e){var t=e.$headerNoSticky,a=e.$header,r=e.$layoutType,o=e.$content,i=e.$sidebar;return t&&n(d||(d=C(["\n      // 头部不粘连样式，头部区域设置\n      & > ."," {\n        position: relative;\n        z-index: 2;\n      }\n\n      ","\n\n      ","\n    "])),a,("simple-all"===r||"side-right-all"===r)&&n(h||(h=C(["\n        & > ."," > ."," {\n          top: 0;\n          min-height: calc(\n            var(--layout-height) - var (--layout-footer-height) - var(--layout-header-height)\n          );\n          max-height: var(--layout-height);\n        }\n      "])),o,i),("simple-no-footer"===r||"side-right-no-footer"===r)&&n(u||(u=C(["\n        & > ."," {\n          top: 0;\n          min-height: calc(var(--layout-height) - var(--layout-footer-height));\n          max-height: var(--layout-height);\n        }\n      "])),i))},function(e){var t=e.$layoutType,a=e.$content;return"no-sidebar"===t&&n(s||(s=C(["\n      & > ."," {\n        min-height: calc(\n          var(--layout-height) - var(--layout-header-height) - var(--layout-footer-height)\n        );\n      }\n    "])),a)},function(e){var t=e.$layoutType,a=e.$sidebar;return"side-full"===t&&n(g||(g=C(["\n      & > ."," {\n        top: 0;\n        height: var(--layout-height);\n      }\n    "])),a)},function(e){var t=e.$layoutType,a=e.$content,r=e.$sidebar;return["simple-all","side-right-all"].includes(t)&&n(p||(p=C(["\n      // 子元素\n      & > ."," {\n        display: grid;\n        grid-template-rows:\n          calc(var(--layout-height) - var(--layout-header-height) - var(--layout-footer-height))\n          auto;\n        min-height: calc(\n          var(--layout-height) - var(--layout-header-height) - var(--layout-footer-height)\n        );\n\n        // side bar 块保持粘连，且在 content height 不足时支撑页面\n        & > ."," {\n          top: var(--layout-header-height);\n          min-height: calc(\n            var(--layout-height) - var(--layout-header-height) - var(--layout-footer-height)\n          );\n          max-height: calc(var(--layout-height) - var(--layout-header-height));\n        }\n      }\n    "])),a,r)},function(e){var t=e.$layoutType,a=e.$content;return["simple-all","simple-no-header"].includes(t)&&n(y||(y=C(["\n      & > ."," {\n        grid-template-columns: var(--layout-side-bar-width) auto;\n        grid-template-areas:\n          'side content'\n          '. content';\n      }\n    "])),a)},function(e){var t=e.$layoutType,a=e.$content;return["side-right-all","side-right-no-header"].includes(t)&&n(c||(c=C(["\n      & > ."," {\n        grid-template-columns: auto var(--layout-side-bar-width);\n        grid-template-rows: 100% max-content;\n        grid-template-areas:\n          'content side'\n          'content .';\n      }\n    "])),a)},function(e){var t=e.$layoutType;return["side-full-all","side-right-full-all"].includes(t)&&n(m||(m=C(["\n      display: grid;\n      grid-template-rows: var(--layout-header-height) auto var(--layout-footer-height);\n      gap: 0px;\n    "])))},function(e){return"side-full-all"===e.$layoutType&&n(f||(f=C(["\n      grid-template-columns: var(--layout-side-bar-width) auto;\n      grid-template-rows: 100% max-content;\n      grid-template-areas:\n        'side header'\n        'side content'\n        'side footer';\n    "])))},function(e){return"side-right-full-all"===e.$layoutType&&n(v||(v=C(["\n      grid-template-columns: auto var(--layout-side-bar-width);\n      grid-template-rows: 100% max-content;\n      grid-template-areas:\n        'header side'\n        'content side'\n        'footer side';\n    "])))},function(e){var t=e.$layoutType,a=e.$content,r=e.$sidebar;return["simple-no-header","side-right-no-header"].includes(t)&&n(w||(w=C(["\n      & > ."," {\n        display: grid;\n        grid-template-rows: auto;\n        // side bar 块的样式\n        & > ."," {\n          top: 0;\n          min-height: calc(var(--layout-height) - var(--layout-footer-height));\n          max-height: var(--layout-height);\n        }\n      }\n    "])),a,r)},function(e){var t=e.$layoutType;return["side-full-no-header","side-right-full-no-header"].includes(t)&&n(b||(b=C(["\n      display: grid;\n      grid-template-rows: auto var(--layout-footer-height);\n      gap: 0px;\n    "])))},function(e){return"side-full-no-header"===e.$layoutType&&n(x||(x=C(["\n      grid-template-columns: var(--layout-side-bar-width) auto;\n      grid-template-rows: 100% max-content;\n      grid-template-areas:\n        'side content'\n        'side footer';\n    "])))},function(e){return"side-right-full-no-header"===e.$layoutType&&n($||($=C(["\n      grid-template-columns: auto var(--layout-side-bar-width);\n      grid-template-rows: 100% max-content;\n      grid-template-areas:\n        'content side'\n        'footer side';\n    "])))},function(e){var t=e.$layoutType,a=e.$sidebar;return["simple-no-footer","side-right-no-footer"].includes(t)&&n(T||(T=C(["\n      display: grid;\n      grid-template-rows: var(--layout-header-height) auto;\n      min-height: calc(var(--layout-height) - var(--layout-header-height));\n      gap: 0px;\n      // side bar 块保持粘连，且在 content height 不足时支撑页面\n      & > ."," {\n        top: var(--layout-header-height);\n        height: calc(var(--layout-height) - var(--layout-header-height));\n      }\n    "])),a)},function(e){return"simple-no-footer"===e.$layoutType&&n(O||(O=C(["\n      grid-template-columns: var(--layout-side-bar-width) auto;\n      grid-template-rows: 100% max-content;\n      grid-template-areas:\n        'header header'\n        'side content'\n        '. content';\n    "])))},function(e){return"side-right-no-footer"===e.$layoutType&&n(j||(j=C(["\n      grid-template-columns: auto var(--layout-side-bar-width);\n      grid-template-rows: 100% max-content;\n      grid-template-areas:\n        'header header'\n        'content side'\n        'content .';\n    "])))},function(e){var t=e.$layoutType,a=e.$main;return["side-full-no-footer","side-right-full-no-footer"].includes(t)&&n(z||(z=C(["\n      display: grid;\n      grid-template-rows: var(--layout-header-height) auto;\n      gap: 0px;\n\n      // content 块\n      & > ."," {\n        min-height: calc(var(--layout-height) - var (--layout-header-height));\n      }\n    "])),a)},function(e){return"side-full-no-footer"===e.$layoutType&&n(k||(k=C(["\n      grid-template-columns: var(--layout-side-bar-width) auto;\n      grid-template-rows: 100% max-content;\n      grid-template-areas:\n        'side header'\n        'side content';\n    "])))},function(e){return"side-right-full-no-footer"===e.$layoutType&&n(P||(P=C(["\n      grid-template-columns: auto var(--layout-side-bar-width);\n      grid-template-rows: 100% max-content;\n      grid-template-areas:\n        'header side'\n        'content side';\n    "])))},function(e){return"only-footer"===e.$layoutType&&n(N||(N=C(["\n      display: grid;\n      grid-template-rows: auto var(--layout-footer-height);\n      grid-template-columns: 1fr;\n      gap: 0px;\n      grid-template-areas: 'content' 'footer';\n    "])))},function(e){return"only-header"===e.$layoutType&&n(S||(S=C(["\n      display: grid;\n      grid-template-rows: var(--layout-header-height) auto;\n      grid-template-columns: 1fr;\n      gap: 0px;\n      grid-template-areas: 'header' 'content';\n    "])))},function(e){var t=e.$layoutType;return["simple-only-side","side-right-only-side","side-full-only-side","side-right-full-only-side"].includes(t)&&n(q||(q=C(["\n      display: grid;\n      // 纵向空间占比设置\n      grid-template-rows: 100%;\n      // 横向空间占比设置\n      grid-template-columns: var(--layout-side-bar-width) auto;\n      grid-template-rows: 100% max-content;\n      gap: 0px;\n      grid-template-areas:\n        'side content'\n        '. content';\n    "])))},function(e){var t=e.$layoutType;return("side-right-full-only-side"===t||"side-right-only-side"===t)&&n(A||(A=C(["\n      grid-template-areas:\n        'content side'\n        'content .';\n      grid-template-columns: auto var(--layout-side-bar-width);\n      grid-template-rows: 100% max-content;\n    "])))});export{I as EnLayoutContent,D as LayoutContentContainer,H as LayoutContentWrapper,E as LayoutFooterContent,F as LayoutHeaderContainer,G as LayoutSideBarContainer};
+//# sourceMappingURL=layoutUtil.mjs.map

package/layoutUtil.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"layoutUtil.mjs","mappings":"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","sources":["webpack://earthnut/webpack/bootstrap","webpack://earthnut/./components/shared/EnLayoutContent/index.tsx","webpack://earthnut/webpack/runtime/define property getters","webpack://earthnut/webpack/runtime/hasOwnProperty shorthand"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","'use client';\nimport { styled, css } from 'styled-components';\nimport { EnLayoutContentProps } from './types';\n\n/**  创建带样式的组件  */\nexport const LayoutContentContainer = styled.main`\n  grid-area: content;\n  position: relative;\n`;\n/**  带样式的组件  */\nexport const LayoutFooterContent = styled.div`\n  grid-area: footer;\n  position: relative;\n  height: var(--layout-footer-height);\n  box-shadow: 0 -1px 13px 0px #0000001a;\n  overflow: hidden;\n`;\n\n/**  带样式的头部  */\nexport const LayoutHeaderContainer = styled.nav`\n  grid-area: header;\n  position: sticky;\n  top: 0px;\n  left: 0px;\n  z-index: 10;\n  height: var(--layout-header-height);\n  box-shadow: 0 4px 13px -3px #0000001a;\n  overflow: hidden;\n`;\n\n/**  带样式的组件  */\nexport const LayoutSideBarContainer = styled.aside`\n  position: sticky;\n  left: 0;\n  z-index: 8;\n  grid-area: side;\n  overflow-x: hidden;\n  overflow-y: auto;\n`;\n\n/**  内容区域容器  */\nexport const LayoutContentWrapper = styled.div`\n  position: relative;\n  grid-area: content;\n  overflow: auto;\n`;\n\n/**  元始的外壳  */\nexport const EnLayoutContent = styled.div<EnLayoutContentProps>`\n  position: relative;\n  top: 0px;\n  height: var(--layout-self-height);\n  width: var(--layout-self-width);\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  ${({ $headerNoSticky, $header, $layoutType, $content, $sidebar }) =>\n    $headerNoSticky &&\n    css`\n      // 头部不粘连样式，头部区域设置\n      & > .${$header} {\n        position: relative;\n        z-index: 2;\n      }\n\n      ${($layoutType === 'simple-all' || $layoutType === 'side-right-all') &&\n      // 头部不粘连样式，内容区设置\n      css`\n        & > .${$content} > .${$sidebar} {\n          top: 0;\n          min-height: calc(\n            var(--layout-height) - var (--layout-footer-height) - var(--layout-header-height)\n          );\n          max-height: var(--layout-height);\n        }\n      `}\n\n      ${($layoutType === 'simple-no-footer' || $layoutType === 'side-right-no-footer') &&\n      css`\n        & > .${$sidebar} {\n          top: 0;\n          min-height: calc(var(--layout-height) - var(--layout-footer-height));\n          max-height: var(--layout-height);\n        }\n      `}\n    `}\n\n  ${({ $layoutType, $content }) =>\n    $layoutType === 'no-sidebar' &&\n    css`\n      & > .${$content} {\n        min-height: calc(\n          var(--layout-height) - var(--layout-header-height) - var(--layout-footer-height)\n        );\n      }\n    `}\n\n  // 侧边栏全屏样式\n  ${({ $layoutType, $sidebar }) =>\n    $layoutType === 'side-full' &&\n    css`\n      & > .${$sidebar} {\n        top: 0;\n        height: var(--layout-height);\n      }\n    `}\n\n  // ------------------------------\n  // --- 标准模式（全）与侧边栏右置（全）共用样式 ---\n  // 标准模式（全）与侧边栏右置（全）\n  ${({ $layoutType, $content, $sidebar }) =>\n    ['simple-all', 'side-right-all'].includes($layoutType) &&\n    css`\n      // 子元素\n      & > .${$content} {\n        display: grid;\n        grid-template-rows:\n          calc(var(--layout-height) - var(--layout-header-height) - var(--layout-footer-height))\n          auto;\n        min-height: calc(\n          var(--layout-height) - var(--layout-header-height) - var(--layout-footer-height)\n        );\n\n        // side bar 块保持粘连，且在 content height 不足时支撑页面\n        & > .${$sidebar} {\n          top: var(--layout-header-height);\n          min-height: calc(\n            var(--layout-height) - var(--layout-header-height) - var(--layout-footer-height)\n          );\n          max-height: calc(var(--layout-height) - var(--layout-header-height));\n        }\n      }\n    `}\n\n  // 标准模式（全） 侧边栏与内容区设置\n  ${({ $layoutType, $content }) =>\n    ['simple-all', 'simple-no-header'].includes($layoutType) &&\n    css`\n      & > .${$content} {\n        grid-template-columns: var(--layout-side-bar-width) auto;\n        grid-template-areas:\n          'side content'\n          '. content';\n      }\n    `}\n  // 侧边栏（全） 侧边栏与内容区设置\n  ${({ $layoutType, $content }) =>\n    ['side-right-all', 'side-right-no-header'].includes($layoutType) &&\n    css`\n      & > .${$content} {\n        grid-template-columns: auto var(--layout-side-bar-width);\n        grid-template-rows: 100% max-content;\n        grid-template-areas:\n          'content side'\n          'content .';\n      }\n    `}\n\n   // 侧边栏 (全) 左侧全屏\n   // side bar 居左全尺寸\n   // side bar 值由 en-layout-side-full 控制\n  ${({ $layoutType }) =>\n    ['side-full-all', 'side-right-full-all'].includes($layoutType) &&\n    css`\n      display: grid;\n      grid-template-rows: var(--layout-header-height) auto var(--layout-footer-height);\n      gap: 0px;\n    `}\n  \n  // 标准的 side bar 居左全尺寸\n  ${({ $layoutType }) =>\n    $layoutType === 'side-full-all' &&\n    css`\n      grid-template-columns: var(--layout-side-bar-width) auto;\n      grid-template-rows: 100% max-content;\n      grid-template-areas:\n        'side header'\n        'side content'\n        'side footer';\n    `}\n\n  // side bar 居右全尺寸\n  ${({ $layoutType }) =>\n    $layoutType === 'side-right-full-all' &&\n    css`\n      grid-template-columns: auto var(--layout-side-bar-width);\n      grid-template-rows: 100% max-content;\n      grid-template-areas:\n        'header side'\n        'content side'\n        'footer side';\n    `}\n  \n  // ------------------------------\n  // --- 标准模式（无 header）与侧边栏在右侧的无头模式共用样式 ---\n  // 标准的无头模式样式、侧边栏在右侧的无头模式样式\n  ${({ $layoutType, $content, $sidebar }) =>\n    ['simple-no-header', 'side-right-no-header'].includes($layoutType) &&\n    css`\n      & > .${$content} {\n        display: grid;\n        grid-template-rows: auto;\n        // side bar 块的样式\n        & > .${$sidebar} {\n          top: 0;\n          min-height: calc(var(--layout-height) - var(--layout-footer-height));\n          max-height: var(--layout-height);\n        }\n      }\n    `}\n  \n  // 侧边栏（无 header ）全屏\n  // side bar 居左全尺寸\n  // side bar 值由 en-layout-side-full 控制\n  ${({ $layoutType }) =>\n    ['side-full-no-header', 'side-right-full-no-header'].includes($layoutType) &&\n    css`\n      display: grid;\n      grid-template-rows: auto var(--layout-footer-height);\n      gap: 0px;\n    `}\n\n  // 标准的 side bar 居左全尺寸\n  ${({ $layoutType }) =>\n    $layoutType === 'side-full-no-header' &&\n    css`\n      grid-template-columns: var(--layout-side-bar-width) auto;\n      grid-template-rows: 100% max-content;\n      grid-template-areas:\n        'side content'\n        'side footer';\n    `}\n\n  // side bar 居右全尺寸\n  ${({ $layoutType }) =>\n    $layoutType === 'side-right-full-no-header' &&\n    css`\n      grid-template-columns: auto var(--layout-side-bar-width);\n      grid-template-rows: 100% max-content;\n      grid-template-areas:\n        'content side'\n        'footer side';\n    `}\n  \n  // ------------------------------\n  // 标准模式（无 footer）与侧边栏右置（无 footer）共用样式\n  // 没有 footer\n  ${({ $layoutType, $sidebar }) =>\n    ['simple-no-footer', 'side-right-no-footer'].includes($layoutType) &&\n    css`\n      display: grid;\n      grid-template-rows: var(--layout-header-height) auto;\n      min-height: calc(var(--layout-height) - var(--layout-header-height));\n      gap: 0px;\n      // side bar 块保持粘连，且在 content height 不足时支撑页面\n      & > .${$sidebar} {\n        top: var(--layout-header-height);\n        height: calc(var(--layout-height) - var(--layout-header-height));\n      }\n    `}\n  \n\n  // 标准模式（无 footer） 侧边栏与内容区设置\n  ${({ $layoutType }) =>\n    $layoutType === 'simple-no-footer' &&\n    css`\n      grid-template-columns: var(--layout-side-bar-width) auto;\n      grid-template-rows: 100% max-content;\n      grid-template-areas:\n        'header header'\n        'side content'\n        '. content';\n    `}\n\n\n// 侧边栏在右侧的无 footer 模式样式\n  ${({ $layoutType }) =>\n    $layoutType === 'side-right-no-footer' &&\n    css`\n      grid-template-columns: auto var(--layout-side-bar-width);\n      grid-template-rows: 100% max-content;\n      grid-template-areas:\n        'header header'\n        'content side'\n        'content .';\n    `}\n\n// 侧边栏 (全) 左侧全屏\n// side bar 居左全尺寸\n// side bar 值由 en-layout-side-full 控制\n${({ $layoutType, $main }) =>\n    ['side-full-no-footer', 'side-right-full-no-footer'].includes($layoutType) &&\n    css`\n      display: grid;\n      grid-template-rows: var(--layout-header-height) auto;\n      gap: 0px;\n\n      // content 块\n      & > .${$main} {\n        min-height: calc(var(--layout-height) - var (--layout-header-height));\n      }\n    `}\n\n// 标准的 side bar 居左全尺寸\n  ${({ $layoutType }) =>\n    $layoutType === 'side-full-no-footer' &&\n    css`\n      grid-template-columns: var(--layout-side-bar-width) auto;\n      grid-template-rows: 100% max-content;\n      grid-template-areas:\n        'side header'\n        'side content';\n    `}\n\n\n  // side bar 居右全尺寸\n  ${({ $layoutType }) =>\n    $layoutType === 'side-right-full-no-footer' &&\n    css`\n      grid-template-columns: auto var(--layout-side-bar-width);\n      grid-template-rows: 100% max-content;\n      grid-template-areas:\n        'header side'\n        'content side';\n    `}\n  \n  // ------------------------------\n  // --- 分割线  --- \n  // 下面是仅头部、底部和侧边栏布局\n  // 仅底部布局\n  ${({ $layoutType }) =>\n    $layoutType === 'only-footer' &&\n    css`\n      display: grid;\n      grid-template-rows: auto var(--layout-footer-height);\n      grid-template-columns: 1fr;\n      gap: 0px;\n      grid-template-areas: 'content' 'footer';\n    `}\n\n  // 仅头部布局\n  ${({ $layoutType }) =>\n    $layoutType === 'only-header' &&\n    css`\n      display: grid;\n      grid-template-rows: var(--layout-header-height) auto;\n      grid-template-columns: 1fr;\n      gap: 0px;\n      grid-template-areas: 'header' 'content';\n    `}\n  \n  // 仅侧边布局\n// 标准的无头模式样式、侧边栏在右侧的无头模式样式\n// side bar 值由 en-layout-side-full 控制\n  ${({ $layoutType }) =>\n    [\n      'simple-only-side',\n      'side-right-only-side',\n      'side-full-only-side',\n      'side-right-full-only-side',\n    ].includes($layoutType) &&\n    css`\n      display: grid;\n      // 纵向空间占比设置\n      grid-template-rows: 100%;\n      // 横向空间占比设置\n      grid-template-columns: var(--layout-side-bar-width) auto;\n      grid-template-rows: 100% max-content;\n      gap: 0px;\n      grid-template-areas:\n        'side content'\n        '. content';\n    `}\n  \n  // 右侧侧边布局\n  ${({ $layoutType }) =>\n    ($layoutType === 'side-right-full-only-side' || $layoutType === 'side-right-only-side') &&\n    css`\n      grid-template-areas:\n        'content side'\n        'content .';\n      grid-template-columns: auto var(--layout-side-bar-width);\n      grid-template-rows: 100% max-content;\n    `}\n`;\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))"],"names":["_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject0","_templateObject1","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","_templateObject18","_templateObject19","_templateObject20","_templateObject21","_templateObject22","_templateObject23","_templateObject24","_templateObject25","_templateObject26","_templateObject27","_templateObject28","_templateObject29","__webpack_require__","_taggedTemplateLiteral","e","t","slice","Object","freeze","defineProperties","raw","value","d","exports","definition","key","o","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","LayoutContentContainer","styled","main","LayoutFooterContent","div","LayoutHeaderContainer","nav","LayoutSideBarContainer","aside","LayoutContentWrapper","EnLayoutContent","_ref","$headerNoSticky","$header","$layoutType","$content","$sidebar","css","_ref2","_ref3","_ref4","includes","_ref5","_ref6","_ref7","_ref8","_ref9","_ref0","_ref1","_ref10","_ref11","_ref12","_ref13","_ref14","_ref15","$main","_ref16","_ref17","_ref18","_ref19","_ref20","_ref21"],"sourceRoot":""}