@pfct/purple 1.4.0-rc.4 → 1.4.0-rc.6

package/dist/library/BasicLayout/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { PropsWithChildren } from '../../types/react';
 export type BasicLayoutProps = PropsWithChildren<{
     hasHeader: boolean;
@@ -11,81 +11,66 @@ declare const BasicLayout: React.FC<BasicLayoutProps> & {
     VerticalHorizontalCenterLayout: React.FC<{
         readonly children: React.ReactNode;
     }>;
-    Header: React.FC<import("../../components/Title").TitleProps>;
-    Body: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    Header: React.FC<import('../..').TitleProps>;
+    Body: import('@emotion/styled').StyledComponent<{
+        theme?: import('@emotion/react').Theme;
+        as?: React.ElementType;
     }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    SidePaddingBody: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    SidePaddingBody: import('@emotion/styled').StyledComponent<{
+        theme?: import('@emotion/react').Theme;
+        as?: React.ElementType;
     } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-        theme?: import("@emotion/react").Theme | undefined;
+        theme?: import('@emotion/react').Theme;
     }, {}, {}>;
-    CenterBody: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    CenterBody: import('@emotion/styled').StyledComponent<{
+        theme?: import('@emotion/react').Theme;
+        as?: React.ElementType;
     } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-        theme?: import("@emotion/react").Theme | undefined;
+        theme?: import('@emotion/react').Theme;
     }, {}, {}>;
     ImageCenterBody: React.FC<{
         imagePath: string;
-        imageType: "svg" | "pngSet" | "png";
+        imageType: "pngSet" | "png" | "svg";
         imageWidth: number;
         imageHeight: number;
     }>;
-    Footer: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    Footer: import('@emotion/styled').StyledComponent<{
+        theme?: import('@emotion/react').Theme;
+        as?: React.ElementType;
     }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    SingleButton: React.FC<import("./Footer").SingleButtonCompProps>;
+    SingleButton: React.FC<import('./Footer').SingleButtonCompProps>;
     SingleATag: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & {
-        isLoading?: boolean | undefined;
+        isLoading?: boolean;
     } & {
         readonly children: React.ReactNode;
-    } & import("../..").SingleButtonColorStyleParams & {
-        typography?: import("@emotion/utils").SerializedStyles | undefined;
-        borderRadius?: string | undefined;
-    } & {
-        height?: number | undefined;
-    } & import("../../components/Button/FloatBaseButton").FloatBaseButtonProps & {
+    } & import('../..').SingleButtonColorStyleParams & import('../..').FloatBaseButtonProps & {
         openUrl: string;
-        target?: string | undefined;
+        target?: string;
     }>;
-    DoubleButton: React.FC<import("../../components/Button/FloatDoubleButton").FloatDoubleButtonProps>;
-    ContentsPadding: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    DoubleButton: React.FC<import('../..').FloatDoubleButtonProps>;
+    ContentsPadding: import('@emotion/styled').StyledComponent<{
+        theme?: import('@emotion/react').Theme;
+        as?: React.ElementType;
     }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    ContentsVerticalPadding: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    ContentsVerticalPadding: import('@emotion/styled').StyledComponent<{
+        theme?: import('@emotion/react').Theme;
+        as?: React.ElementType;
     }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    StickBottomWrapper: import("../..").ReactFCWithChildren<unknown>;
+    StickBottomWrapper: import('../..').ReactFCWithChildren;
     SingleButtonWithTooltip: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & {
-        isLoading?: boolean | undefined;
+        isLoading?: boolean;
     } & {
         readonly children: React.ReactNode;
-    } & import("../..").SingleButtonColorStyleParams & {
-        typography?: import("@emotion/utils").SerializedStyles | undefined;
-        borderRadius?: string | undefined;
-    } & {
-        height?: number | undefined;
-    } & {
-        tooltip: import("../..").ImpactTooltipProps;
+    } & import('../..').SingleButtonColorStyleParams & {
+        tooltip: import('../..').ImpactTooltipProps;
     }>;
     SingleButtonWithInformationIcon: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & {
-        isLoading?: boolean | undefined;
+        isLoading?: boolean;
     } & {
         readonly children: React.ReactNode;
-    } & import("../..").SingleButtonColorStyleParams & {
-        typography?: import("@emotion/utils").SerializedStyles | undefined;
-        borderRadius?: string | undefined;
-    } & {
-        height?: number | undefined;
-    } & {
+    } & import('../..').SingleButtonColorStyleParams & {
         infoText: string;
     }>;
-    Form: React.FC<import("../BasicForm").BasicFormProps>;
+    Form: React.FC<import('../BasicForm').BasicFormProps>;
 };
 export default BasicLayout;

package/dist/library/BasicLayout/index.es.js

@@ -0,0 +1,124 @@
+import { j as o } from "../../chunks/jsx-runtime.Drh4NO5G.js";
+import d, { useContext as u } from "react";
+import "../../chunks/index.styled.ByGzJNsf.js";
+import "../../components/Badge/IconBadge/index.styled.es.js";
+import "../../components/Badge/TextBadge/index.styled.es.js";
+import "../../components/Loading/Spinner/index.styled.es.js";
+import "../../core/Colors/index.es.js";
+import "../../core/TextStyles/index.es.js";
+import "../../components/Card/index.styled.es.js";
+import B from "../../hooks/useLayoutIsMobile.es.js";
+import "../../components/Comment/index.es.js";
+import "../../components/Control/CheckBox/index.styled.es.js";
+import "@emotion/react";
+import "../../utils/GenerateColorStyle/mini-button.es.js";
+import "../../utils/GenerateColorStyle/datepicker.es.js";
+import "../../components/Control/CheckMark/index.styled.es.js";
+import "../../components/Control/Switch/index.styled.es.js";
+import "../../components/DatePicker/BaseDatePicker/index.styled.es.js";
+import "../../components/DatePicker/BaseDatePicker/YearMonthController/index.styed.es.js";
+import "../../Icon/generated/AlarmFill.es.js";
+import "../../Icon/generated/Calendar.es.js";
+import "../../Icon/generated/Cancel.es.js";
+import "../../Icon/generated/CancelCircle.es.js";
+import "../../Icon/generated/CartFill.es.js";
+import "../../Icon/generated/Check.es.js";
+import "../../Icon/generated/ChevronDown.es.js";
+import "../../Icon/generated/ChevronLeft.es.js";
+import "../../Icon/generated/ChevronRight.es.js";
+import "../../Icon/generated/ChevronUp.es.js";
+import "../../Icon/generated/DoubleChevronLeft.es.js";
+import "../../Icon/generated/DoubleChevronRight.es.js";
+import "../../Icon/generated/EyeFill.es.js";
+import "../../Icon/generated/EyeSlashFill.es.js";
+import "../../Icon/generated/Filter.es.js";
+import "../../Icon/generated/Information.es.js";
+import "../../Icon/generated/Menu.es.js";
+import "../../Icon/generated/More.es.js";
+import "../../Icon/generated/PersonFill.es.js";
+import "../../Icon/generated/Plus.es.js";
+import "../../Icon/generated/QuestionCircle.es.js";
+import "../../Icon/generated/Re.es.js";
+import "../../Icon/generated/Search.es.js";
+import "../../Icon/generated/SettingFill.es.js";
+import "../../Icon/generated/Share.es.js";
+import "../../Icon/generated/Store.es.js";
+import "../IconWithImage/index.styled.es.js";
+import "../List/BottomSheetItemList/index.styled.es.js";
+import "lottie-web";
+import "../Lottie/index.styled.es.js";
+import "../Spacing/index.styled.es.js";
+import "../../components/DatePicker/BaseDatePicker/Month/index.styled.es.js";
+import "../../components/DatePicker/BaseDatePicker/Week/index.styled.es.js";
+import "../../types/date.es.js";
+import "../../components/DatePicker/BaseDatePicker/hooks/index.util.es.js";
+import "../../components/DatePicker/SingleDatePickerModal/index.styled.es.js";
+import "../../components/DatePicker/SingleDatePickerModal/useSingleDatePickerModal.es.js";
+import "../../components/DatePicker/RangeDatePickerModal/index.styled.es.js";
+import "../../components/DatePicker/RangeDatePickerModal/useRangeDatePickerModal.es.js";
+import "../../components/Divider/index.styled.es.js";
+import "../../chunks/index.styled.SOJ65tcg.js";
+import "../../components/Input/BaseInput/index.es.js";
+import "../../components/Input/ResidentNumberInput/index.styled.es.js";
+import "../../components/Loading/Skeleton/index.es.js";
+import "../../components/Navigation/index.styled.es.js";
+import "../../components/Navigation/BaseNavigation/index.styled.es.js";
+import "../../components/Navigation/constant.es.js";
+import "../../components/Segment/BaseSegment/index.styled.es.js";
+import "../../components/Segment/ExtendSegment/index.styled.es.js";
+import { Title as c } from "../../components/Title/index.es.js";
+import "../../components/ToastMessage/Toast/index.styled.es.js";
+import "../../components/Tooltip/TooltipBase/index.styled.es.js";
+import "../../components/ui/bottomSheet.es.js";
+import g from "../BasicForm/index.es.js";
+import { BasicLayoutBase as r, MarginTopNoHeader as C, MarginBottomNoFooter as y, ContentsVerticalPadding as f, ContentsPadding as S, CenterBody as h, SidePaddingBody as L, PureLayoutBase as e } from "./index.styled.es.js";
+import { ImageCenterBodyComp as j } from "./Body.es.js";
+import { SingleButtonWithInformationIconComp as P, SingleButtonWithTooltipComp as W, StickBottomWrapperComp as x, DoubleButtonComp as H, SingleATagComp as I, SingleButtonComp as T } from "./Footer.es.js";
+import { GlobalLayoutHeaderContext as b } from "../GlobalLayoutHeaderProvider/index.type.es.js";
+const F = d.memo(
+  ({ hasHeader: i, hasFooter: n, children: a, bottomExtraComp: t, bodyCenterizing: m = !1 }) => {
+    const p = B(), { hasGlobalLayoutHeaderInMobile: l, hasGlobalLayoutHeader: s } = u(b);
+    return /* @__PURE__ */ o.jsxs(
+      r.ParentWrapper,
+      {
+        hasGlobalLayoutHeader: s,
+        bodyCenterizing: m,
+        children: [
+          /* @__PURE__ */ o.jsxs(r.ChildrenWrapper, { bodyCenterizing: m, children: [
+            !l && !i && /* @__PURE__ */ o.jsx(C, {}),
+            a,
+            p && !!t && t,
+            !n && /* @__PURE__ */ o.jsx(y, {})
+          ] }),
+          !p && !!t && t
+        ]
+      }
+    );
+  }
+), M = ({ children: i }) => /* @__PURE__ */ o.jsx(e.ParentWrapper, { children: /* @__PURE__ */ o.jsx(e.VerticalHorizontalCenterBody, { children: i }) }), rt = Object.assign(F, {
+  /* Layout */
+  // BasicLayout (itself): BasicLayoutComp
+  VerticalHorizontalCenterLayout: M,
+  /* Header */
+  Header: c,
+  /* Body */
+  Body: r.Body,
+  SidePaddingBody: L,
+  CenterBody: h,
+  ImageCenterBody: j,
+  /* Footer */
+  Footer: r.Footer,
+  SingleButton: T,
+  SingleATag: I,
+  DoubleButton: H,
+  ContentsPadding: S,
+  ContentsVerticalPadding: f,
+  StickBottomWrapper: x,
+  SingleButtonWithTooltip: W,
+  SingleButtonWithInformationIcon: P,
+  /* etc */
+  Form: g
+});
+export {
+  rt as default
+};

package/dist/library/BasicLayout/index.styled.cjs.js

@@ -0,0 +1,150 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("@emotion/react"),s=require("@emotion/styled"),a=require("../../core/Colors/index.cjs.js");require("../../chunks/jsx-runtime.713F0z8w.js");require("../../chunks/index.styled.B3JLBK5h.js");require("../../core/TextStyles/index.cjs.js");const d=require("../GNB/index.constant.cjs.js"),t=require("../../utils/media.util.cjs.js");require("../../utils/GenerateColorStyle/mini-button.cjs.js");require("../../utils/GenerateColorStyle/datepicker.cjs.js");require("../../components/Badge/IconBadge/index.styled.cjs.js");require("../../components/Badge/TextBadge/index.styled.cjs.js");require("../../components/Loading/Spinner/index.styled.cjs.js");require("../../components/Card/index.styled.cjs.js");require("react");require("../../components/Comment/index.cjs.js");require("../../components/Control/CheckBox/index.styled.cjs.js");require("../../components/Control/CheckMark/index.styled.cjs.js");require("../../components/Control/Switch/index.styled.cjs.js");require("../../components/DatePicker/BaseDatePicker/index.styled.cjs.js");require("../../components/DatePicker/BaseDatePicker/YearMonthController/index.styed.cjs.js");require("../../Icon/generated/AlarmFill.cjs.js");require("../../Icon/generated/Calendar.cjs.js");require("../../Icon/generated/Cancel.cjs.js");require("../../Icon/generated/CancelCircle.cjs.js");require("../../Icon/generated/CartFill.cjs.js");require("../../Icon/generated/Check.cjs.js");require("../../Icon/generated/ChevronDown.cjs.js");require("../../Icon/generated/ChevronLeft.cjs.js");require("../../Icon/generated/ChevronRight.cjs.js");require("../../Icon/generated/ChevronUp.cjs.js");require("../../Icon/generated/DoubleChevronLeft.cjs.js");require("../../Icon/generated/DoubleChevronRight.cjs.js");require("../../Icon/generated/EyeFill.cjs.js");require("../../Icon/generated/EyeSlashFill.cjs.js");require("../../Icon/generated/Filter.cjs.js");require("../../Icon/generated/Information.cjs.js");require("../../Icon/generated/Menu.cjs.js");require("../../Icon/generated/More.cjs.js");require("../../Icon/generated/PersonFill.cjs.js");require("../../Icon/generated/Plus.cjs.js");require("../../Icon/generated/QuestionCircle.cjs.js");require("../../Icon/generated/Re.cjs.js");require("../../Icon/generated/Search.cjs.js");require("../../Icon/generated/SettingFill.cjs.js");require("../../Icon/generated/Share.cjs.js");require("../../Icon/generated/Store.cjs.js");require("../IconWithImage/index.styled.cjs.js");require("../List/BottomSheetItemList/index.styled.cjs.js");require("lottie-web");require("../Lottie/index.styled.cjs.js");require("../Spacing/index.styled.cjs.js");require("../../components/DatePicker/BaseDatePicker/Month/index.styled.cjs.js");require("../../components/DatePicker/BaseDatePicker/Week/index.styled.cjs.js");require("../../types/date.cjs.js");require("../../components/DatePicker/BaseDatePicker/hooks/index.util.cjs.js");require("../../components/DatePicker/SingleDatePickerModal/index.styled.cjs.js");require("../../components/DatePicker/SingleDatePickerModal/useSingleDatePickerModal.cjs.js");require("../../components/DatePicker/RangeDatePickerModal/index.styled.cjs.js");require("../../components/DatePicker/RangeDatePickerModal/useRangeDatePickerModal.cjs.js");require("../../components/Divider/index.styled.cjs.js");require("../../chunks/index.styled.DkE3TbtV.js");require("../../components/Input/BaseInput/index.cjs.js");require("../../components/Input/ResidentNumberInput/index.styled.cjs.js");require("../../components/Loading/Skeleton/index.cjs.js");require("../../components/Navigation/index.styled.cjs.js");require("../../components/Navigation/BaseNavigation/index.styled.cjs.js");require("../../components/Navigation/constant.cjs.js");require("../../components/Segment/BaseSegment/index.styled.cjs.js");require("../../components/Segment/ExtendSegment/index.styled.cjs.js");require("../../components/ToastMessage/Toast/index.styled.cjs.js");require("../../components/Tooltip/TooltipBase/index.styled.cjs.js");require("../../components/ui/bottomSheet.cjs.js");const l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=l(s),n=(e=0)=>i.css`
+	height: calc(100vh - ${e}px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
+	height: calc(100vh - ${e}px - constant(safe-area-inset-top) - constant(safe-area-inset-bottom));
+`,u={ParentWrapper:r.default.div`
+		${({hasGlobalLayoutHeader:e})=>e?n(d.GNB_HEIGHT.mobile):n()}
+
+		${({bodyCenterizing:e})=>!e&&i.css`
+				height: inherit;
+			`}
+
+		${t.Larger(i.css`
+			/* scroll 생기기 전에는 sticky > relative 로 자리차지 */
+			height: initial;
+			padding: 80px 0;
+		`)};
+	`,ChildrenWrapper:r.default.div`
+		width: 100%;
+		/* <Card /> spec 에서 disabled, click 등의 속성 없앰 */
+
+		box-sizing: border-box;
+		background-color: ${a.basicColors.white};
+		border-radius: 20px;
+
+		/* [flex] stretch component 를 위해 우선 적용 */
+		${({bodyCenterizing:e})=>e&&i.css`
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+			`}
+
+		${t.Larger(i.css`
+			width: 600px;
+			margin: 0 auto;
+			border-radius: 20px;
+			box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.04);
+
+			/* [flex] 초기화 */
+			flex: initial;
+			/*  bodyCenterizing 초기화 */
+			height: initial;
+		`)}
+	`,Header:r.default.div``,Body:r.default.div``,Footer:r.default.div``},c={ParentWrapper:r.default.div`
+		${n()}
+	`,VerticalHorizontalCenterBody:r.default.div`
+		${n()}
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+	`},o={larger:80,smaller:20},p=r.default(u.Body)`
+	padding: 0 ${o.smaller}px;
+
+	${t.Larger(i.css`
+		padding: 0 ${o.larger}px;
+	`)};
+`,g=r.default(u.Body)`
+	/* 주의사항 : BasicLayout.props bodyCenterizing={true} 를 넘겨줘야합니다 */
+	/* 세로 - full 차지 */
+	flex-grow: 1;
+
+	/* 박스 내 가로/세로 중앙 */
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+`,q=r.default.img`
+	width: ${({width:e})=>e}px;
+	height: ${({height:e})=>e}px;
+`,f=25,h=r.default.div`
+	width: 100%;
+	height: ${f}px; /** TODO: 임시, 정확한 수치 찾기 */
+
+	${t.Larger(i.css`
+		height: 80px;
+	`)}
+`,x=r.default.div`
+	width: 100%;
+	height: ${d.GNB_HEIGHT.mobile}px;
+
+	${t.Larger(i.css`
+		height: ${d.GNB_HEIGHT.pc}px;
+	`)}
+`,m=r.default.div`
+	width: 100%;
+	min-height: 80px; /* Body = flex-grow 에 대응하기위해 단순 height 로는 안됨 */
+
+	/** pc, mobile 공통 */
+`,y=r.default.div`
+	width: 100%;
+	height: 150px;
+
+	${({backgroundColor:e})=>e&&`background-color:${e}`};
+
+	${t.Larger(i.css`
+		width: auto;
+		height: auto;
+	`)}
+`,B=r.default.div`
+	padding: 60px ${o.larger}px 80px;
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+`,$=r.default.a`
+	color: transparent;
+	text-decoration: none;
+	width: 100%;
+`,b=r.default.div`
+	padding: 0 ${o.smaller}px;
+
+	${t.Larger(i.css`
+		padding: 0 ${o.larger}px;
+	`)}
+`,v=r.default.div`
+	height: 15px;
+
+	${t.Larger(i.css`
+		height: 60px;
+	`)}
+`,H=r.default.div`
+	width: 100%;
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	padding: 0 ${o.smaller}px;
+	position: fixed;
+	bottom: 20px;
+
+	${t.Larger(i.css`
+		padding: 60px ${o.larger}px 80px;
+		position: static;
+	`)}
+`,_=r.default.div`
+	.tippy-content {
+		background-color: ${a.basicColors.gray900};
+		color: ${a.basicColors.white};
+	}
+	.tippy-arrow:before {
+		border-top-color: ${a.basicColors.gray900} !important;
+	}
+
+	width: 100%;
+`,w=r.default.div`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+`;exports.ATagButton=$;exports.BasicLayoutBase=u;exports.ButtonWrapperInPc=B;exports.CenterBody=g;exports.ContentsPadding=b;exports.ContentsVerticalPadding=v;exports.ImgBase=q;exports.InformationIconWrapper=w;exports.MarginBottomHasFooter=y;exports.MarginBottomNoFooter=m;exports.MarginTopHasHeader=x;exports.MarginTopNoHeader=h;exports.PureLayoutBase=c;exports.SidePaddingBody=p;exports.StickBottomWrapper=H;exports.TooltipButtonWrapper=_;exports.defaultLRPadding=o;

package/dist/library/BasicLayout/index.styled.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface BasicLayoutBodyCenterProps {
     bodyCenterizing: boolean;
 }
@@ -6,105 +5,105 @@ interface BasicLayoutParentProps extends BasicLayoutBodyCenterProps {
     hasGlobalLayoutHeader: boolean;
 }
 export declare const BasicLayoutBase: {
-    ParentWrapper: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-    } & BasicLayoutParentProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    ChildrenWrapper: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-    } & BasicLayoutBodyCenterProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    Header: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    Body: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    Footer: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    ParentWrapper: import('@emotion/styled').StyledComponent<{
+        theme?: import('@emotion/react').Theme;
+        as?: React.ElementType;
+    } & BasicLayoutParentProps, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    ChildrenWrapper: import('@emotion/styled').StyledComponent<{
+        theme?: import('@emotion/react').Theme;
+        as?: React.ElementType;
+    } & BasicLayoutBodyCenterProps, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Header: import('@emotion/styled').StyledComponent<{
+        theme?: import('@emotion/react').Theme;
+        as?: React.ElementType;
+    }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Body: import('@emotion/styled').StyledComponent<{
+        theme?: import('@emotion/react').Theme;
+        as?: React.ElementType;
+    }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Footer: import('@emotion/styled').StyledComponent<{
+        theme?: import('@emotion/react').Theme;
+        as?: React.ElementType;
+    }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 };
 export declare const PureLayoutBase: {
-    ParentWrapper: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    VerticalHorizontalCenterBody: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    ParentWrapper: import('@emotion/styled').StyledComponent<{
+        theme?: import('@emotion/react').Theme;
+        as?: React.ElementType;
+    }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    VerticalHorizontalCenterBody: import('@emotion/styled').StyledComponent<{
+        theme?: import('@emotion/react').Theme;
+        as?: React.ElementType;
+    }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 };
 export declare const defaultLRPadding: {
     larger: number;
     smaller: number;
 };
-export declare const SidePaddingBody: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
+export declare const SidePaddingBody: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
+    theme?: import('@emotion/react').Theme;
 }, {}, {}>;
-export declare const CenterBody: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
+export declare const CenterBody: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
+    theme?: import('@emotion/react').Theme;
 }, {}, {}>;
 interface ImageProps {
     width: number;
     height: number;
 }
-export declare const ImgBase: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & ImageProps, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const MarginTopNoHeader: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const MarginTopHasHeader: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const MarginBottomNoFooter: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const MarginBottomHasFooter: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+export declare const ImgBase: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & ImageProps, import('react').DetailedHTMLProps<import('react').ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const MarginTopNoHeader: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MarginTopHasHeader: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MarginBottomNoFooter: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MarginBottomHasFooter: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
 } & {
-    backgroundColor?: string | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ButtonWrapperInPc: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ATagButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
-export declare const ContentsPadding: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ContentsVerticalPadding: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StickBottomWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TooltipButtonWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const InformationIconWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    backgroundColor?: string;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ButtonWrapperInPc: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ATagButton: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
+export declare const ContentsPadding: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContentsVerticalPadding: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StickBottomWrapper: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TooltipButtonWrapper: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const InformationIconWrapper: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};