@pfct/purple 1.4.0-rc.3 → 1.4.0-rc.5

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.SwCr6Bqs.js");require("../../core/TextStyles/index.cjs.js");const u=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/Button/DoubleButton/index.styled.cjs.js");require("../../components/MiniButton/BoxMiniButton/index.styled.cjs.js");require("../../components/Button/FloatBaseButton/index.styled.cjs.js");require("../../components/Button/FloatDoubleButton/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/Loading/Spinner/index.styled.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");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));
+`,d={ParentWrapper:r.default.div`
+		${({hasGlobalLayoutHeader:e})=>e?n(u.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(d.Body)`
+	padding: 0 ${o.smaller}px;
+
+	${t.Larger(i.css`
+		padding: 0 ${o.larger}px;
+	`)};
+`,g=r.default(d.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: ${u.GNB_HEIGHT.mobile}px;
+
+	${t.Larger(i.css`
+		height: ${u.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=d;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;
 }
@@ -7,34 +6,34 @@ interface BasicLayoutParentProps extends BasicLayoutBodyCenterProps {
 }
 export declare const BasicLayoutBase: {
     ParentWrapper: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: import("react").ElementType<any> | undefined;
+        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 | undefined;
-        as?: import("react").ElementType<any> | undefined;
+        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 | undefined;
-        as?: import("react").ElementType<any> | undefined;
+        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 | undefined;
-        as?: import("react").ElementType<any> | undefined;
+        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 | undefined;
-        as?: import("react").ElementType<any> | undefined;
+        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> | undefined;
+        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 | undefined;
-        as?: import("react").ElementType<any> | undefined;
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
     }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 };
 export declare const defaultLRPadding: {
@@ -42,73 +41,69 @@ export declare const defaultLRPadding: {
     smaller: number;
 };
 export declare const SidePaddingBody: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const CenterBody: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
+    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> | undefined;
+    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 | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    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 | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    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 | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    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 | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
-    backgroundColor?: string | undefined;
+    backgroundColor?: string;
 }, 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> | undefined;
+    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 | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    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 | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    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 | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    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 | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    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 | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    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 | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

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

@@ -0,0 +1,257 @@
+import { css as o } from "@emotion/react";
+import t from "@emotion/styled";
+import { basicColors as e } from "../../core/Colors/index.es.js";
+import "../../chunks/jsx-runtime.Drh4NO5G.js";
+import "../../chunks/index.styled.BTZpARWY.js";
+import "../../core/TextStyles/index.es.js";
+import { GNB_HEIGHT as m } from "../GNB/index.constant.es.js";
+import { Larger as r } from "../../utils/media.util.es.js";
+import "../../utils/GenerateColorStyle/mini-button.es.js";
+import "../../utils/GenerateColorStyle/datepicker.es.js";
+import "../../components/Badge/IconBadge/index.styled.es.js";
+import "../../components/Badge/TextBadge/index.styled.es.js";
+import "../../components/Button/DoubleButton/index.styled.es.js";
+import "../../components/MiniButton/BoxMiniButton/index.styled.es.js";
+import "../../components/Button/FloatBaseButton/index.styled.es.js";
+import "../../components/Button/FloatDoubleButton/index.styled.es.js";
+import "../../components/Card/index.styled.es.js";
+import "react";
+import "../../components/Comment/index.es.js";
+import "../../components/Control/CheckBox/index.styled.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/Loading/Spinner/index.styled.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 "../../components/ToastMessage/Toast/index.styled.es.js";
+import "../../components/Tooltip/TooltipBase/index.styled.es.js";
+const n = (i = 0) => o`
+	height: calc(100vh - ${i}px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
+	height: calc(100vh - ${i}px - constant(safe-area-inset-top) - constant(safe-area-inset-bottom));
+`, a = {
+  ParentWrapper: t.div`
+		${({ hasGlobalLayoutHeader: i }) => i ? n(m.mobile) : n()}
+
+		${({ bodyCenterizing: i }) => !i && o`
+				height: inherit;
+			`}
+
+		${r(o`
+			/* scroll 생기기 전에는 sticky > relative 로 자리차지 */
+			height: initial;
+			padding: 80px 0;
+		`)};
+	`,
+  ChildrenWrapper: t.div`
+		width: 100%;
+		/* <Card /> spec 에서 disabled, click 등의 속성 없앰 */
+
+		box-sizing: border-box;
+		background-color: ${e.white};
+		border-radius: 20px;
+
+		/* [flex] stretch component 를 위해 우선 적용 */
+		${({ bodyCenterizing: i }) => i && o`
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+			`}
+
+		${r(o`
+			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: t.div``,
+  Body: t.div``,
+  Footer: t.div``
+}, Nt = {
+  ParentWrapper: t.div`
+		${n()}
+	`,
+  VerticalHorizontalCenterBody: t.div`
+		${n()}
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+	`
+}, p = {
+  larger: 80,
+  smaller: 20
+}, _t = t(a.Body)`
+	padding: 0 ${p.smaller}px;
+
+	${r(o`
+		padding: 0 ${p.larger}px;
+	`)};
+`, kt = t(a.Body)`
+	/* 주의사항 : BasicLayout.props bodyCenterizing={true} 를 넘겨줘야합니다 */
+	/* 세로 - full 차지 */
+	flex-grow: 1;
+
+	/* 박스 내 가로/세로 중앙 */
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+`, Ot = t.img`
+	width: ${({ width: i }) => i}px;
+	height: ${({ height: i }) => i}px;
+`, d = 25, zt = t.div`
+	width: 100%;
+	height: ${d}px; /** TODO: 임시, 정확한 수치 찾기 */
+
+	${r(o`
+		height: 80px;
+	`)}
+`, Et = t.div`
+	width: 100%;
+	height: ${m.mobile}px;
+
+	${r(o`
+		height: ${m.pc}px;
+	`)}
+`, Ft = t.div`
+	width: 100%;
+	min-height: 80px; /* Body = flex-grow 에 대응하기위해 단순 height 로는 안됨 */
+
+	/** pc, mobile 공통 */
+`, jt = t.div`
+	width: 100%;
+	height: 150px;
+
+	${({ backgroundColor: i }) => i && `background-color:${i}`};
+
+	${r(o`
+		width: auto;
+		height: auto;
+	`)}
+`, At = t.div`
+	padding: 60px ${p.larger}px 80px;
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+`, Gt = t.a`
+	color: transparent;
+	text-decoration: none;
+	width: 100%;
+`, Rt = t.div`
+	padding: 0 ${p.smaller}px;
+
+	${r(o`
+		padding: 0 ${p.larger}px;
+	`)}
+`, St = t.div`
+	height: 15px;
+
+	${r(o`
+		height: 60px;
+	`)}
+`, Dt = t.div`
+	width: 100%;
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	padding: 0 ${p.smaller}px;
+	position: fixed;
+	bottom: 20px;
+
+	${r(o`
+		padding: 60px ${p.larger}px 80px;
+		position: static;
+	`)}
+`, Vt = t.div`
+	.tippy-content {
+		background-color: ${e.gray900};
+		color: ${e.white};
+	}
+	.tippy-arrow:before {
+		border-top-color: ${e.gray900} !important;
+	}
+
+	width: 100%;
+`, qt = t.div`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+`;
+export {
+  Gt as ATagButton,
+  a as BasicLayoutBase,
+  At as ButtonWrapperInPc,
+  kt as CenterBody,
+  Rt as ContentsPadding,
+  St as ContentsVerticalPadding,
+  Ot as ImgBase,
+  qt as InformationIconWrapper,
+  jt as MarginBottomHasFooter,
+  Ft as MarginBottomNoFooter,
+  Et as MarginTopHasHeader,
+  zt as MarginTopNoHeader,
+  Nt as PureLayoutBase,
+  _t as SidePaddingBody,
+  Dt as StickBottomWrapper,
+  Vt as TooltipButtonWrapper,
+  p as defaultLRPadding
+};

package/dist/library/Flex/index.cjs.js

@@ -0,0 +1 @@
+"use strict";const n=require("react"),e=require("./index.styled.cjs.js"),o=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},l=o(n),a=Object.assign(l.default.Fragment,{Row:e.FlexContainerRow,Column:e.FlexContainerColumn,Item:e.FlexItem});module.exports=a;

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

@@ -1,19 +1,19 @@
 import React from 'react';
 import * as Styled from './index.styled';
 declare const Flex: React.ExoticComponent<{
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 }> & {
     Row: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: React.ElementType<any> | undefined;
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
     } & Styled.FlexContainerProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
     Column: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: React.ElementType<any> | undefined;
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
     } & Styled.FlexContainerProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
     Item: import("@emotion/styled").StyledComponent<{
-        theme?: import("@emotion/react").Theme | undefined;
-        as?: React.ElementType<any> | undefined;
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
     } & {
         flexBasis?: import("csstype").Property.FlexBasis<string | number> | undefined;
         flexGrow?: import("csstype").Property.FlexGrow | undefined;

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

@@ -0,0 +1,10 @@
+import e from "react";
+import { FlexItem as t, FlexContainerColumn as o, FlexContainerRow as m } from "./index.styled.es.js";
+const l = Object.assign(e.Fragment, {
+  Row: m,
+  Column: o,
+  Item: t
+});
+export {
+  l as default
+};

package/dist/library/Flex/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/dist/library/Flex/index.stories.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../chunks/jsx-runtime.713F0z8w.js"),r=require("./index.cjs.js");require("../../core/Colors/index.cjs.js");require("../../chunks/index.styled.SwCr6Bqs.js");require("../../core/TextStyles/index.cjs.js");const s=require("../../core/Typography/Title1.cjs.js"),o=require("../../core/Typography/Title4.cjs.js"),l={title:"Library/Flex",component:r,tags:["autodocs"]},i={render:t=>e.jsxRuntimeExports.jsxs(r.Row,{...t,children:[e.jsxRuntimeExports.jsx(s.Title1,{children:"안녕하세요"}),e.jsxRuntimeExports.jsx(o.Title4,{children:"반가워요"})]}),args:{justifyContent:"space-between"}};i.storyName="Flex.Row";const n={render:t=>e.jsxRuntimeExports.jsxs(r.Column,{...t,children:[e.jsxRuntimeExports.jsx(s.Title1,{children:"안녕하세요"}),e.jsxRuntimeExports.jsx(o.Title4,{children:"반가워요"})]}),args:{justifyContent:"space-between"}};n.storyName="Flex.Column";exports.Story1=i;exports.Story2=n;exports.default=l;