@pfct/purple 1.3.4-npm-test.1

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

@@ -0,0 +1,197 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InformationIconWrapper = exports.TooltipButtonWrapper = exports.StickBottomWrapper = exports.ContentsVerticalPadding = exports.ContentsPadding = exports.ATagButton = exports.ButtonWrapperInPc = exports.MarginBottomHasFooter = exports.MarginBottomNoFooter = exports.MarginTopHasHeader = exports.MarginTopNoHeader = exports.ImgBase = exports.CenterBody = exports.SidePaddingBody = exports.defaultLRPadding = exports.PureLayoutBase = exports.BasicLayoutBase = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const core_1 = require("../../core");
+const index_constant_1 = require("../GNB/index.constant");
+const utils_1 = require("../../utils");
+/* ==================== Layout, Wrapper ==================== */
+const getFullHeightStyle = (deletePx = 0) => (0, react_1.css) `
+	height: calc(100vh - ${deletePx}px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
+	height: calc(100vh - ${deletePx}px - constant(safe-area-inset-top) - constant(safe-area-inset-bottom));
+`;
+exports.BasicLayoutBase = {
+    ParentWrapper: styled_1.default.div `
+		${({ hasGlobalLayoutHeader }) => hasGlobalLayoutHeader ? getFullHeightStyle(index_constant_1.GNB_HEIGHT.mobile) : getFullHeightStyle()}
+
+		${({ bodyCenterizing }) => !bodyCenterizing &&
+        (0, react_1.css) `
+				height: inherit;
+			`}
+
+		${(0, utils_1.Larger)((0, react_1.css) `
+			/* scroll 생기기 전에는 sticky > relative 로 자리차지 */
+			height: initial;
+			padding: 80px 0;
+		`)};
+	`,
+    ChildrenWrapper: styled_1.default.div `
+		width: 100%;
+		/* <Card /> spec 에서 disabled, click 등의 속성 없앰 */
+
+		box-sizing: border-box;
+		background-color: ${core_1.basicColors.white};
+		border-radius: 20px;
+
+		/* [flex] stretch component 를 위해 우선 적용 */
+		${({ bodyCenterizing }) => bodyCenterizing &&
+        (0, react_1.css) `
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+			`}
+
+		${(0, utils_1.Larger)((0, react_1.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: styled_1.default.div ``,
+    Body: styled_1.default.div ``,
+    Footer: styled_1.default.div ``,
+};
+exports.PureLayoutBase = {
+    ParentWrapper: styled_1.default.div `
+		${getFullHeightStyle()}
+	`,
+    VerticalHorizontalCenterBody: styled_1.default.div `
+		${getFullHeightStyle()}
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+	`,
+};
+/* ==================== Body ==================== */
+exports.defaultLRPadding = {
+    larger: 80,
+    smaller: 20,
+};
+exports.SidePaddingBody = (0, styled_1.default)(exports.BasicLayoutBase.Body) `
+	padding: 0 ${exports.defaultLRPadding.smaller}px;
+
+	${(0, utils_1.Larger)((0, react_1.css) `
+		padding: 0 ${exports.defaultLRPadding.larger}px;
+	`)};
+`;
+exports.CenterBody = (0, styled_1.default)(exports.BasicLayoutBase.Body) `
+	/* 주의사항 : BasicLayout.props bodyCenterizing={true} 를 넘겨줘야합니다 */
+	/* 세로 - full 차지 */
+	flex-grow: 1;
+
+	/* 박스 내 가로/세로 중앙 */
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+`;
+exports.ImgBase = styled_1.default.img `
+	width: ${({ width }) => width}px;
+	height: ${({ height }) => height}px;
+`;
+/* ==================== Footer ==================== */
+const MARGIN_TOP_NO_HEADER_IN_MOBILE = 25;
+exports.MarginTopNoHeader = styled_1.default.div `
+	width: 100%;
+	height: ${MARGIN_TOP_NO_HEADER_IN_MOBILE}px; /** TODO: 임시, 정확한 수치 찾기 */
+
+	${(0, utils_1.Larger)((0, react_1.css) `
+		height: 80px;
+	`)}
+`;
+exports.MarginTopHasHeader = styled_1.default.div `
+	width: 100%;
+	height: ${index_constant_1.GNB_HEIGHT.mobile}px;
+
+	${(0, utils_1.Larger)((0, react_1.css) `
+		height: ${index_constant_1.GNB_HEIGHT.pc}px;
+	`)}
+`;
+exports.MarginBottomNoFooter = styled_1.default.div `
+	width: 100%;
+	min-height: 80px; /* Body = flex-grow 에 대응하기위해 단순 height 로는 안됨 */
+
+	/** pc, mobile 공통 */
+`;
+exports.MarginBottomHasFooter = styled_1.default.div `
+	width: 100%;
+	height: 150px;
+
+	${({ backgroundColor }) => backgroundColor && `background-color:${backgroundColor}`};
+
+	${(0, utils_1.Larger)((0, react_1.css) `
+		width: auto;
+		height: auto;
+	`)}
+`;
+//StickBottomWrapper 랑 정리 필요
+exports.ButtonWrapperInPc = styled_1.default.div `
+	padding: 60px ${exports.defaultLRPadding.larger}px 80px;
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+`;
+exports.ATagButton = styled_1.default.a `
+	color: transparent;
+	text-decoration: none;
+	width: 100%;
+`;
+exports.ContentsPadding = styled_1.default.div `
+	padding: 0 ${exports.defaultLRPadding.smaller}px;
+
+	${(0, utils_1.Larger)((0, react_1.css) `
+		padding: 0 ${exports.defaultLRPadding.larger}px;
+	`)}
+`;
+exports.ContentsVerticalPadding = styled_1.default.div `
+	height: 15px;
+
+	${(0, utils_1.Larger)((0, react_1.css) `
+		height: 60px;
+	`)}
+`;
+exports.StickBottomWrapper = styled_1.default.div `
+	width: 100%;
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	padding: 0 ${exports.defaultLRPadding.smaller}px;
+	position: fixed;
+	bottom: 20px;
+
+	${(0, utils_1.Larger)((0, react_1.css) `
+		padding: 60px ${exports.defaultLRPadding.larger}px 80px;
+		position: static;
+	`)}
+`;
+exports.TooltipButtonWrapper = styled_1.default.div `
+	.tippy-content {
+		background-color: ${core_1.basicColors.gray900};
+		color: ${core_1.basicColors.white};
+	}
+	.tippy-arrow:before {
+		border-top-color: ${core_1.basicColors.gray900} !important;
+	}
+
+	width: 100%;
+`;
+exports.InformationIconWrapper = styled_1.default.div `
+	display: flex;
+	justify-content: center;
+	align-items: center;
+`;

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

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

package/dist/library/Flex/index.js

@@ -0,0 +1,36 @@
+"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 });
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const Flex = Object.assign(react_1.default.Fragment, {
+    Row: Styled.FlexContainerRow,
+    Column: Styled.FlexContainerColumn,
+    Item: Styled.FlexItem,
+});
+exports.default = Flex;

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FlexContainerProps } from './index.styled';
+type Story = StoryObj<FlexContainerProps>;
+declare const meta: Meta<FlexContainerProps>;
+export default meta;
+export declare const Story1: Story;
+export declare const Story2: Story;

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

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Story2 = exports.Story1 = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = __importDefault(require("."));
+const core_1 = require("../../core");
+const meta = {
+    title: 'Library/Flex',
+    component: _1.default,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Story1 = {
+    render: (props) => (react_1.default.createElement(_1.default.Row, Object.assign({}, props),
+        react_1.default.createElement(core_1.Title1, null, "\uC548\uB155\uD558\uC138\uC694"),
+        react_1.default.createElement(core_1.Title4, null, "\uBC18\uAC00\uC6CC\uC694"))),
+    args: {
+        justifyContent: 'space-between',
+    },
+};
+exports.Story1.storyName = 'Flex.Row';
+exports.Story2 = {
+    render: (props) => (react_1.default.createElement(_1.default.Column, Object.assign({}, props),
+        react_1.default.createElement(core_1.Title1, null, "\uC548\uB155\uD558\uC138\uC694"),
+        react_1.default.createElement(core_1.Title4, null, "\uBC18\uAC00\uC6CC\uC694"))),
+    args: {
+        justifyContent: 'space-between',
+    },
+};
+exports.Story2.storyName = 'Flex.Column';

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

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+export type FlexContainerProps = Pick<CSSProperties, 'flexWrap' | 'justifyContent' | 'alignItems' | 'alignContent'>;
+type FlexItemProps = Pick<CSSProperties, 'flexGrow' | 'flexShrink' | 'flexBasis'>;
+export declare const FlexContainerRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & FlexContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FlexContainerColumn: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & FlexContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FlexItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & FlexItemProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

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

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlexItem = exports.FlexContainerColumn = exports.FlexContainerRow = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const GenerateFlexStyle = (props) => {
+    return {
+        display: 'flex',
+        flexWrap: Boolean(props.flexWrap) ? props.flexWrap : undefined,
+        justifyContent: Boolean(props.justifyContent) ? props.justifyContent : undefined,
+        alignContent: Boolean(props.alignContent) ? props.alignContent : undefined,
+    };
+};
+exports.FlexContainerRow = styled_1.default.div((props) => (Object.assign(Object.assign({}, GenerateFlexStyle(props)), { flexDirection: 'row' })));
+exports.FlexContainerColumn = styled_1.default.div((props) => (Object.assign(Object.assign({}, GenerateFlexStyle(props)), { flexDirection: 'column' })));
+exports.FlexItem = styled_1.default.div((props) => ({
+    flexGrow: Boolean(props.flexGrow) ? props.flexGrow : undefined,
+    flexShrink: Boolean(props.flexShrink) ? props.flexGrow : undefined,
+    flexBasis: Boolean(props.flexBasis) ? props.flexBasis : undefined,
+}));

package/dist/library/GNB/index.constant.d.ts

@@ -0,0 +1,4 @@
+export declare const GNB_HEIGHT: {
+    pc: number;
+    mobile: number;
+};

package/dist/library/GNB/index.constant.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GNB_HEIGHT = void 0;
+// TODO: 서비스마다 변경될 가능성 있음.
+exports.GNB_HEIGHT = {
+    pc: 84,
+    mobile: 55,
+};

package/dist/library/GlobalLayoutHeaderProvider/index.type.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { NavigationProps } from '../../components/Navigation';
+type HeaderForNone = {
+    type: 'none';
+};
+type HeaderForGNB = {
+    type: 'gnb';
+};
+type HeaderForNav = {
+    type: 'nav';
+} & NavigationProps;
+export type GlobalLayoutHeaderPcProps = HeaderForNone | HeaderForGNB;
+export type GlobalLayoutHeaderMobileProps = HeaderForNone | HeaderForGNB | HeaderForNav;
+export type SetGlobalLayoutHeaderProps<P, M, GnbExtraType> = {
+    pc: P extends 'gnb' ? HeaderForGNB & GnbExtraType : HeaderForNone;
+    mobile: M extends 'gnb' ? HeaderForGNB & GnbExtraType : M extends 'nav' ? HeaderForNav : HeaderForNone;
+};
+interface GlobalLayoutHeaderContext {
+    hideGnb: () => void;
+    showGnb: () => void;
+    setGlobalLayoutHeader: <P, M, GnbExtraType>(props: SetGlobalLayoutHeaderProps<P, M, GnbExtraType>) => void;
+    hasGlobalLayoutHeaderInMobile: boolean;
+    hasGlobalLayoutHeader: boolean;
+}
+export declare const GlobalLayoutHeaderContext: React.Context<GlobalLayoutHeaderContext>;
+export {};

package/dist/library/GlobalLayoutHeaderProvider/index.type.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlobalLayoutHeaderContext = void 0;
+const react_1 = __importDefault(require("react"));
+exports.GlobalLayoutHeaderContext = react_1.default.createContext({
+    hideGnb: () => {
+        console.info('');
+    },
+    showGnb: () => {
+        console.info('');
+    },
+    setGlobalLayoutHeader: () => {
+        console.info('');
+    },
+    hasGlobalLayoutHeaderInMobile: false,
+    hasGlobalLayoutHeader: false,
+});

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface IconWithImageProps {
+    srcPath: string;
+    width: number;
+    height?: number;
+}
+declare const IconWithImage: React.FC<IconWithImageProps>;
+export type { IconWithImageProps };
+export { IconWithImage };

package/dist/library/IconWithImage/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconWithImage = void 0;
+const react_1 = __importDefault(require("react"));
+const index_styled_1 = require("./index.styled");
+const IconWithImage = ({ srcPath, width, height }) => {
+    return (react_1.default.createElement(index_styled_1.IconWrapper, { width: width, height: height || width, src: `${srcPath}.png`, srcSet: `${srcPath}@2x.png 2x, ${srcPath}@3x.png 3x` }));
+};
+exports.IconWithImage = IconWithImage;

package/dist/library/IconWithImage/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/library/IconWithImage/index.spec.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const _1 = require(".");
+const props = {
+    srcPath: 'hello.png',
+    width: 200,
+};
+describe('<IconWithImage />', () => {
+    it('렌더링 체크', () => {
+        (0, react_2.render)(react_1.default.createElement(react_1.default.Fragment, null,
+            "\uD655\uC778",
+            react_1.default.createElement(_1.IconWithImage, Object.assign({}, props))));
+        expect(react_2.screen.getByText('확인')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface IconWrapperProps {
+    width: number;
+    height: number;
+}
+export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IconWrapperProps, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export {};

package/dist/library/IconWithImage/index.styled.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconWrapper = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.IconWrapper = styled_1.default.img `
+	${({ width, height }) => (0, react_1.css) `
+		width: ${width}px
+		height: ${height}px
+	`}
+`;

package/dist/library/List/BottomSheetItemList/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+type BottomSheetItemListProps<ValueType = string> = {
+    item: SelectOptionProps<ValueType>[];
+    onClick: (value: SelectOptionProps) => void;
+};
+interface SelectOptionProps<ValueType = string> {
+    value: ValueType;
+    label: string;
+    disabled?: boolean;
+}
+declare const BottomSheetItemList: React.FC<BottomSheetItemListProps>;
+export type { BottomSheetItemListProps, SelectOptionProps };
+export { BottomSheetItemList };

package/dist/library/List/BottomSheetItemList/index.js

@@ -0,0 +1,42 @@
+"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.BottomSheetItemList = void 0;
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const BottomSheetItemList = ({ item, onClick }) => {
+    return (react_1.default.createElement(react_1.default.Fragment, null, item.map((item) => {
+        var _a;
+        return (react_1.default.createElement(Styled.Item, { key: item.label, onClick: () => {
+                if (!item.disabled) {
+                    onClick({ value: item.value, label: item.label });
+                }
+            }, disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false }, item.label));
+    })));
+};
+exports.BottomSheetItemList = BottomSheetItemList;

package/dist/library/List/BottomSheetItemList/index.styled.d.ts

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

package/dist/library/List/BottomSheetItemList/index.styled.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Item = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const TextStyles_1 = require("../../../core/TextStyles");
+const Colors_1 = require("../../../core/Colors");
+exports.Item = styled_1.default.div `
+	width: 100%;
+	height: 48px;
+	padding: 15px 25px;
+	background-color: ${Colors_1.basicColors.white};
+	${(0, TextStyles_1.title2)({ color: Colors_1.basicColors.gray400 })}
+
+	${({ disabled }) => disabled &&
+    (0, react_1.css) `
+			background-color: ${Colors_1.basicColors.gray50};
+			color: ${Colors_1.basicColors.gray200};
+			cursor: not-allowed;
+		`}
+
+	&:active {
+		background-color: ${Colors_1.basicColors.gray25};
+	}
+`;

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

@@ -0,0 +1 @@
+export * from './BottomSheetItemList';

package/dist/library/List/index.js

@@ -0,0 +1,17 @@
+"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("./BottomSheetItemList"), exports);

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import * as Styled from './index.styled';
+interface LottieProps extends Styled.LottieContainerProps {
+    lottieFileSrcPath: string;
+    alterImgSrcOnLoad?: string;
+    viewBox?: {
+        x?: number;
+        y?: number;
+        width: number;
+        height: number;
+    };
+    playOnce?: boolean;
+    autoplay?: boolean;
+}
+declare const Lottie: React.FC<LottieProps>;
+export type { LottieProps };
+export { Lottie };