@pfct/purple 1.3.4-npm-test.1

package/dist/components/BottomSheet/BaseBottomSheet/index.styled.js

@@ -0,0 +1,133 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FooterWrapper = exports.ChildrenWrapper = exports.HeaderWrapper = exports.ContentWrapperPadding = exports.Content = exports.ContentWrapper = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Colors_1 = require("../../../core/Colors");
+const style_constants_1 = require("../../../constants/style.constants");
+const media_util_1 = require("../../../utils/media.util");
+const DEFAULT_BOTTOM_VALUE = '100%';
+const up = (0, react_1.keyframes) `
+	from {
+		transform: translate(0, ${DEFAULT_BOTTOM_VALUE});
+		}
+	to {
+		transform: translate(0, 0);
+	}
+`;
+const down = (0, react_1.keyframes) `
+	from {
+		transform: translate(0, 0);
+	}
+	to {
+		transform: translate(0, ${DEFAULT_BOTTOM_VALUE});
+	}
+`;
+const bottomSettings = (visible, vh, minHeight) => {
+    let mobileMinHeight = 'initial';
+    switch (minHeight) {
+        case 's':
+            mobileMinHeight = vh * 0.3 + 'px';
+            break;
+        case 'm':
+            mobileMinHeight = vh * 0.6 + 'px';
+            break;
+        case 'l':
+            mobileMinHeight = vh * 0.9 + 'px';
+            break;
+        case 'full':
+            mobileMinHeight = vh + 'px';
+            break;
+    }
+    const isFullPage = minHeight === 'full';
+    return (0, react_1.css) `
+		animation: ${visible
+        ? (0, react_1.css) `
+					${up} 0.3s forwards
+			  `
+        : (0, react_1.css) `
+					${down} 0.3s forwards
+			  `};
+
+		min-height: ${mobileMinHeight};
+		max-height: calc(${vh - (isFullPage ? 0 : 45)}px);
+		border-top-right-radius: ${isFullPage ? 0 : '10px'};
+		border-top-left-radius: ${isFullPage ? 0 : '10px'};
+
+		${(0, media_util_1.Larger)((0, react_1.css) `
+			animation: none;
+		`)}
+	`;
+};
+exports.ContentWrapper = styled_1.default.div `
+	position: fixed;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	${(0, media_util_1.Larger)((0, react_1.css) `
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+
+		width: auto;
+	`)}
+`;
+exports.Content = styled_1.default.div `
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	background-color: ${Colors_1.basicColors.white};
+	z-index: ${(el) => el.zIndex + 1};
+
+	${({ visible, minHeight, vh }) => bottomSettings(visible, vh, minHeight)};
+
+	${({ vh }) => (0, media_util_1.Larger)((0, react_1.css) `
+			width: 360px;
+			max-height: calc(${vh - 120}px);
+			min-height: initial;
+			border-radius: 10px;
+		`)}
+`;
+exports.ContentWrapperPadding = 25;
+exports.HeaderWrapper = styled_1.default.div `
+	flex: none;
+	width: 100%;
+`;
+exports.ChildrenWrapper = styled_1.default.div `
+	flex: 1;
+
+	${({ hideOverflow = true }) => hideOverflow && 'overflow-y: auto;'}
+
+	${({ hasContentPadding = true, hasFullHeight = false, hasBottomPadding = true }) => {
+    const bottomPadding = hasFullHeight ? 0 : hasBottomPadding ? style_constants_1.LayoutSpacing.bottomMargin.mobile : 0;
+    if (hasContentPadding) {
+        return (0, react_1.css) `
+				padding: 0 ${exports.ContentWrapperPadding}px ${bottomPadding}px;
+			`;
+    }
+    else {
+        return (0, react_1.css) `
+				padding: 0 0 ${bottomPadding}px 0;
+			`;
+    }
+}};
+
+	${({ hasFullHeight = false, hasBottomPadding = true }) => (0, media_util_1.Larger)((0, react_1.css) `
+			padding-bottom: ${hasFullHeight ? 0 : hasBottomPadding ? style_constants_1.LayoutSpacing.bottomMargin.pc : 0}px;
+		`)}
+`;
+exports.FooterWrapper = styled_1.default.div `
+	flex: none;
+	width: 100%;
+
+	padding: 0 20px 20px 20px;
+`;

package/dist/components/BottomSheet/NavBottomSheet/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { BaseBottomSheetProps } from '../BaseBottomSheet';
+import { NavigationProps } from '../../Navigation';
+import { ReactFCWithChildren } from '../../../types/react';
+declare const BottomSheetNavigationTemplate: ReactFCWithChildren;
+type NavBottomSheetProps = BaseBottomSheetProps;
+declare const NavBottomSheet: ReactFCWithChildren<BaseBottomSheetProps> & {
+    Header: ReactFCWithChildren<unknown>;
+    Navigation: React.FC<NavigationProps>;
+    Body: ReactFCWithChildren<import("../BaseBottomSheet/index.styled").ChildrenStyleProps>;
+    SingleButton: React.FC<import("../../Button/BaseButton").BaseButtonProps>;
+    DoubleButton: React.FC<import("../../Button/DoubleButton").DoubleButtonProps>;
+};
+export type { NavBottomSheetProps };
+export { NavBottomSheet, BottomSheetNavigationTemplate };

package/dist/components/BottomSheet/NavBottomSheet/index.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : 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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BottomSheetNavigationTemplate = exports.NavBottomSheet = void 0;
+const react_1 = __importDefault(require("react"));
+const BaseBottomSheet_1 = require("../BaseBottomSheet");
+const Navigation_1 = require("../../Navigation");
+const Styled = __importStar(require("./index.styled"));
+const BottomSheetNavigationTemplate = ({ children }) => (react_1.default.createElement(BaseBottomSheet_1.BaseBottomSheetHeader, null,
+    react_1.default.createElement(Styled.NavigationWrapper, null, children)));
+exports.BottomSheetNavigationTemplate = BottomSheetNavigationTemplate;
+const BottomSheetNavigation = (props) => (react_1.default.createElement(BottomSheetNavigationTemplate, null,
+    react_1.default.createElement(Navigation_1.Navigation, Object.assign({}, props))));
+const NavBottomSheet = Object.assign(BaseBottomSheet_1.BaseBottomSheetComp, {
+    Header: BaseBottomSheet_1.BaseBottomSheetHeader,
+    Navigation: BottomSheetNavigation,
+    Body: BaseBottomSheet_1.BaseBottomSheetBody,
+    SingleButton: BaseBottomSheet_1.BaseBottomSheetCTASingleButton,
+    DoubleButton: BaseBottomSheet_1.BaseBottomSheetCTADoubleButton,
+});
+exports.NavBottomSheet = NavBottomSheet;

package/dist/components/BottomSheet/NavBottomSheet/index.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { NavBottomSheetProps } from '.';
+type Story = StoryObj<NavBottomSheetProps>;
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Bottom-Sheet-295e90bcc23247bb9a14b354a142df6d?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 화면 하단에서 상단으로 들어오는 컨테이너 영역입니다. <br/>
+ * 현재 페이지를 벗어나지 않고 관련된 정보 제공하거나 동작을 제어합니다.
+ *
+ */
+declare const meta: Meta<NavBottomSheetProps>;
+export default meta;
+export declare const Story1: Story;

package/dist/components/BottomSheet/NavBottomSheet/index.stories.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : 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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Story1 = void 0;
+const react_1 = __importStar(require("react"));
+const _1 = require(".");
+const Button_1 = require("../../Button");
+const NavComponent = (props) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const toggleOpen = () => {
+        setOpen((prev) => !prev);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { style: { width: '200px' } },
+            react_1.default.createElement(Button_1.SingleButton, { onClick: toggleOpen, colorType: "gray", purpose: "main" }, "\uBAA8\uB2EC \uC624\uD508")),
+        react_1.default.createElement(_1.NavBottomSheet, Object.assign({}, props, { visible: open }),
+            react_1.default.createElement(_1.NavBottomSheet.Navigation, { hasBackgroundColor: true, contentColor: "gray", rightArea: { type: 'closeIcon', handleClickButton: toggleOpen } }),
+            react_1.default.createElement(_1.NavBottomSheet.Body, null, "Hello"),
+            react_1.default.createElement(_1.NavBottomSheet.SingleButton, { colorType: "gray", purpose: "main", onClick: toggleOpen }, "\uBC84\uD2BC"))));
+};
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Bottom-Sheet-295e90bcc23247bb9a14b354a142df6d?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 화면 하단에서 상단으로 들어오는 컨테이너 영역입니다. <br/>
+ * 현재 페이지를 벗어나지 않고 관련된 정보 제공하거나 동작을 제어합니다.
+ *
+ */
+const meta = {
+    title: 'Component/BottomSheet/NavBottomSheet',
+    component: NavComponent,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => react_1.default.createElement(NavComponent, Object.assign({}, props)),
+    args: {
+        minHeight: 'full',
+    },
+    argTypes: {},
+    parameters: {
+        docs: {
+            description: {
+                story: `
+- 바텀시트 내에서 depth가 발생할 때 혹은 사용자가 어떤 곳에 머물고 있는지 가볍게 알려줄 때 사용합니다.
+<br/>
+- 네비게이션바 아래부터 버튼이 없는 경우는 가장 하단까지, 버튼이 있는 경우는 버튼 위까지 스크롤 영역으로 지정합니다.`,
+            },
+        },
+    },
+};
+exports.Story1.storyName = '바탐시트 - 네비게이션바';

package/dist/components/BottomSheet/NavBottomSheet/index.styled.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const NavigationWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/BottomSheet/NavBottomSheet/index.styled.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationWrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.NavigationWrapper = styled_1.default.div `
+	margin-top: 10px;
+`;

package/dist/components/BottomSheet/TitleBottomSheet/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { BaseBottomSheetProps } from '../BaseBottomSheet';
+import { DoubleButtonProps } from '../../Button/DoubleButton';
+type TitleBottomSheetProps = BaseBottomSheetProps;
+type TitleProps = {
+    title?: string | React.ReactNode;
+    subTitle?: string | React.ReactNode;
+    hasContentPadding?: boolean;
+};
+declare const TitleBottomSheet: import("../../..").ReactFCWithChildren<BaseBottomSheetProps> & {
+    Header: import("../../..").ReactFCWithChildren<unknown>;
+    Body: import("../../..").ReactFCWithChildren<import("../BaseBottomSheet/index.styled").ChildrenStyleProps>;
+    Title: React.FC<TitleProps>;
+    SingleButton: React.FC<import("../../Button/BaseButton").BaseButtonProps>;
+    DoubleButton: React.FC<DoubleButtonProps>;
+};
+export type { TitleBottomSheetProps };
+export { TitleBottomSheet };

package/dist/components/BottomSheet/TitleBottomSheet/index.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : 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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TitleBottomSheet = void 0;
+const react_1 = __importDefault(require("react"));
+const BaseBottomSheet_1 = require("../BaseBottomSheet");
+const Headline4_1 = require("../../../core/Typography/Headline4");
+const Styled = __importStar(require("./index.styled"));
+const Title = ({ title, subTitle, hasContentPadding = true }) => {
+    return (react_1.default.createElement(Styled.TitleWrapper, { contentPadding: hasContentPadding },
+        title && react_1.default.createElement(Headline4_1.Headline4, null, title),
+        subTitle && react_1.default.createElement(Styled.SubTitle, { className: Styled.className.subTitle }, subTitle)));
+};
+const SingleButton = (props) => {
+    return (react_1.default.createElement(Styled.ButtonMargin, null,
+        react_1.default.createElement(BaseBottomSheet_1.BaseBottomSheetCTASingleButton, Object.assign({}, props))));
+};
+const DoubleButton = (props) => {
+    return (react_1.default.createElement(Styled.ButtonMargin, null,
+        react_1.default.createElement(BaseBottomSheet_1.BaseBottomSheetCTADoubleButton, Object.assign({}, props))));
+};
+const TitleBottomSheet = Object.assign(BaseBottomSheet_1.BaseBottomSheetComp, {
+    Header: BaseBottomSheet_1.BaseBottomSheetHeader,
+    Body: BaseBottomSheet_1.BaseBottomSheetBody,
+    Title,
+    SingleButton,
+    DoubleButton,
+});
+exports.TitleBottomSheet = TitleBottomSheet;

package/dist/components/BottomSheet/TitleBottomSheet/index.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TitleBottomSheetProps } from '.';
+type Story = StoryObj<TitleBottomSheetProps>;
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Bottom-Sheet-295e90bcc23247bb9a14b354a142df6d?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 화면 하단에서 상단으로 들어오는 컨테이너 영역입니다. <br/>
+ * 현재 페이지를 벗어나지 않고 관련된 정보 제공하거나 동작을 제어합니다.
+ *
+ */
+declare const meta: Meta<TitleBottomSheetProps>;
+export default meta;
+export declare const Story1: Story;

package/dist/components/BottomSheet/TitleBottomSheet/index.stories.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : 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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Story1 = void 0;
+const react_1 = __importStar(require("react"));
+const _1 = require(".");
+const Button_1 = require("../../Button");
+const TitleComponent = (props) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const toggleOpen = () => {
+        setOpen((prev) => !prev);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { style: { width: '200px' } },
+            react_1.default.createElement(Button_1.SingleButton, { colorType: "gray", purpose: "main", onClick: toggleOpen }, "\uBAA8\uB2EC \uC624\uD508")),
+        react_1.default.createElement(_1.TitleBottomSheet, Object.assign({}, props, { visible: open }),
+            react_1.default.createElement(_1.TitleBottomSheet.Body, null,
+                react_1.default.createElement(_1.TitleBottomSheet.Title, { title: "\uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694", subTitle: "\uC11C\uBE0C \uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694" })),
+            react_1.default.createElement(_1.TitleBottomSheet.SingleButton, { colorType: "gray", purpose: "main", onClick: toggleOpen }, "\uBC84\uD2BC"))));
+};
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Bottom-Sheet-295e90bcc23247bb9a14b354a142df6d?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 화면 하단에서 상단으로 들어오는 컨테이너 영역입니다. <br/>
+ * 현재 페이지를 벗어나지 않고 관련된 정보 제공하거나 동작을 제어합니다.
+ *
+ */
+const meta = {
+    title: 'Component/BottomSheet/TitleBottomSheet',
+    component: TitleComponent,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => react_1.default.createElement(TitleComponent, Object.assign({}, props)),
+    args: {
+        minHeight: 'full',
+    },
+    argTypes: {},
+    parameters: {
+        docs: {
+            description: {
+                story: `
+- 바텀시트가 필요할 때 기본적으로 사용되며 사용자가 어떤 행동을 해야하는지 혹은 정보를 명확하게 인지시킬 때 사용합니다.  
+<br/>
+- 하단 버튼이 없는 경우는 전체 범위를, 하단 버튼이 있는 경우는 버튼 위까지 스크롤 영역으로 지정합니다. `,
+            },
+        },
+    },
+};
+exports.Story1.storyName = '바탐시트 - 타이틀';

package/dist/components/BottomSheet/TitleBottomSheet/index.styled.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export declare const className: {
+    subTitle: string;
+};
+export declare const SubTitle: import("@emotion/styled").StyledComponent<{
+    lg?: "Headline1" | "Headline2" | "Headline3" | "Headline4" | "Headline5" | "Headline6" | "Title1" | "Title2" | "Title3" | "Title4" | "Body1" | "Body2" | undefined;
+    sm?: "Headline1" | "Headline2" | "Headline3" | "Headline4" | "Headline5" | "Headline6" | "Title1" | "Title2" | "Title3" | "Title4" | "Body1" | "Body2" | undefined;
+    color?: string | undefined;
+    textAlign?: string | undefined;
+    fontWeight?: string | undefined;
+    className?: string | undefined;
+    element?: string | undefined;
+    'data-element-name'?: string | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export type TitleWrapperProps = {
+    contentPadding: boolean;
+};
+export declare const TitleWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TitleWrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ButtonMargin: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/BottomSheet/TitleBottomSheet/index.styled.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonMargin = exports.TitleWrapper = exports.SubTitle = exports.className = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Colors_1 = require("../../../core/Colors");
+const Typography_1 = require("../../../core/Typography");
+const index_styled_1 = require("../BaseBottomSheet/index.styled");
+exports.className = {
+    subTitle: 'title-bottom-sheet-sub-title',
+};
+exports.SubTitle = (0, styled_1.default)(Typography_1.Title3) `
+	color: ${Colors_1.basicColors.gray400};
+`;
+exports.TitleWrapper = styled_1.default.div `
+	padding: 25px ${({ contentPadding }) => `${contentPadding ? 0 : `${index_styled_1.ContentWrapperPadding}px`}`};
+
+	.${exports.className.subTitle} {
+		margin-top: 10px;
+	}
+`;
+exports.ButtonMargin = styled_1.default.div `
+	margin-top: 25px;
+`;

package/dist/components/BottomSheet/index.d.ts

@@ -0,0 +1,3 @@
+export * from './BaseBottomSheet';
+export * from './TitleBottomSheet';
+export * from './NavBottomSheet';

package/dist/components/BottomSheet/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./BaseBottomSheet"), exports);
+__exportStar(require("./TitleBottomSheet"), exports);
+__exportStar(require("./NavBottomSheet"), exports);

package/dist/components/Button/BaseButton/index.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { SerializedStyles } from '@emotion/react';
+import { PropsWithChildren } from '../../../types/react';
+import { SingleButtonColorStyleParams } from '../../../utils';
+type BaseProps = PropsWithChildren<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    isLoading?: boolean;
+}>;
+type StyleProps = SingleButtonColorStyleParams & {
+    typography?: SerializedStyles;
+    borderRadius?: string;
+};
+type OwnHeight = {
+    height?: number;
+};
+type BaseButtonProps = BaseProps & StyleProps & OwnHeight;
+declare const BaseButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    isLoading?: boolean | undefined;
+} & {
+    readonly children: React.ReactNode;
+} & SingleButtonColorStyleParams & {
+    typography?: SerializedStyles | undefined;
+    borderRadius?: string | undefined;
+} & OwnHeight & React.RefAttributes<HTMLButtonElement>>;
+export type { BaseButtonProps };
+export { BaseButton };