@croquiscom/pds 0.33.2 → 0.34.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @croquiscom/pds
 
+## 0.34.0
+
+### Minor Changes
+
+- 9325699: DatePicker 컴포넌트 내부 TimePicker 제공 추가
+- 3b8aca5: feat: sns 관련 아이콘 추가
+- 4c401ac: DatePicker, DateRangePicker 컴포넌트 추가
+- 8b91422: TimePicker, TimeRangePicker 컴포넌트 추가
+
 ## 0.33.2
 
 ### Patch Changes

package/assets/icons/Blog16.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="8" fill="#363644"/>
+<path d="M2.76909 9.33337H4.02691C4.65386 9.33337 5.00737 8.99939 5.00737 8.54431C5.00737 8.13416 4.7105 7.87634 4.37066 7.86072V7.83337C4.67925 7.76892 4.898 7.54626 4.898 7.224C4.898 6.79431 4.57183 6.50525 3.93706 6.50525H2.76909V9.33337ZM3.43316 8.79431V8.10681H3.88237C4.148 8.10486 4.31206 8.24744 4.31206 8.47009C4.31206 8.67126 4.17339 8.79431 3.87066 8.79431H3.43316ZM3.43316 7.67322V7.0365H3.8355C4.07183 7.0365 4.21831 7.15759 4.21831 7.349C4.21831 7.55212 4.05425 7.67126 3.82769 7.67322H3.43316Z" fill="white"/>
+<path d="M5.448 9.33337H7.29956V8.79041H6.11206V6.50525H5.448V9.33337Z" fill="white"/>
+<path d="M10.1863 7.91931C10.1882 6.98572 9.60034 6.46619 8.84253 6.46619C8.08081 6.46619 7.49878 6.98572 7.49878 7.91931C7.49878 8.84705 8.08081 9.37244 8.84253 9.37244C9.60034 9.37244 10.1882 8.85095 10.1863 7.91931ZM8.17847 7.91931C8.17847 7.35681 8.43042 7.05017 8.84253 7.05212C9.25659 7.05017 9.50855 7.35681 9.50659 7.91931C9.50855 8.48181 9.25659 8.7865 8.84253 8.7865C8.43042 8.7865 8.17847 8.48181 8.17847 7.91931Z" fill="white"/>
+<path d="M12.4402 7.42712H13.116C13.0437 6.86267 12.5417 6.46619 11.8894 6.46619C11.1375 6.46619 10.5457 6.99939 10.5457 7.92322C10.5457 8.81775 11.0925 9.37244 11.9011 9.37244C12.6257 9.37244 13.1433 8.91931 13.1433 8.16541V7.79431H11.9324V8.28259H12.5027C12.4929 8.58923 12.282 8.7865 11.905 8.7865C11.4773 8.7865 11.2253 8.46814 11.2253 7.91541C11.2253 7.36658 11.489 7.05017 11.905 7.05212C12.1843 7.05017 12.3757 7.1908 12.4402 7.42712Z" fill="white"/>
+</svg>

package/assets/icons/Instagram16.svg

@@ -0,0 +1,20 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="8" fill="url(#paint0_radial_13161_43109)"/>
+<circle cx="8" cy="8" r="8" fill="url(#paint1_radial_13161_43109)"/>
+<path d="M11.3333 5.2223C11.3333 5.52913 11.0846 5.77786 10.7778 5.77786C10.471 5.77786 10.2222 5.52913 10.2222 5.2223C10.2222 4.91548 10.471 4.66675 10.7778 4.66675C11.0846 4.66675 11.3333 4.91548 11.3333 5.2223Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99995 10.7777C9.53407 10.7777 10.7777 9.53407 10.7777 7.99995C10.7777 6.46582 9.53407 5.22217 7.99995 5.22217C6.46582 5.22217 5.22217 6.46582 5.22217 7.99995C5.22217 9.53407 6.46582 10.7777 7.99995 10.7777ZM7.99995 9.84439C9.0186 9.84439 9.84439 9.0186 9.84439 7.99995C9.84439 6.98129 9.0186 6.1555 7.99995 6.1555C6.98129 6.1555 6.1555 6.98129 6.1555 7.99995C6.1555 9.0186 6.98129 9.84439 7.99995 9.84439Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 5.85714C3 4.27919 4.27919 3 5.85714 3H10.1429C11.7208 3 13 4.27919 13 5.85714V10.1429C13 11.7208 11.7208 13 10.1429 13H5.85714C4.27919 13 3 11.7208 3 10.1429V5.85714ZM5.85714 3.93333H10.1429C11.2053 3.93333 12.0667 4.79465 12.0667 5.85714V10.1429C12.0667 11.2053 11.2053 12.0667 10.1429 12.0667H5.85714C4.79465 12.0667 3.93333 11.2053 3.93333 10.1429V5.85714C3.93333 4.79465 4.79465 3.93333 5.85714 3.93333Z" fill="white"/>
+<defs>
+<radialGradient id="paint0_radial_13161_43109" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(13.52 18.16) rotate(-105.945) scale(20.9667 31.1856)">
+<stop offset="0.197635" stop-color="#F50B5E"/>
+<stop offset="0.52034" stop-color="#DF0897"/>
+<stop offset="0.768785" stop-color="#962FBF"/>
+<stop offset="0.933441" stop-color="#4F5BD5"/>
+</radialGradient>
+<radialGradient id="paint1_radial_13161_43109" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(5.36 16) rotate(-54.9721) scale(10.4534 11.434)">
+<stop offset="0.09375" stop-color="#FEDA75"/>
+<stop offset="0.475046" stop-color="#FA7E1E"/>
+<stop offset="1" stop-color="#FA7E1E" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>

package/assets/icons/LinkCircle16.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="8" fill="#363644"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.323 4.53952C8.7415 4.13531 9.30202 3.91165 9.88383 3.91671C10.4656 3.92177 11.0222 4.15513 11.4336 4.56655C11.845 4.97797 12.0784 5.53451 12.0834 6.11632C12.0885 6.69813 11.8648 7.25865 11.4606 7.67715L11.4566 7.68132L10.3252 8.81263C10.1003 9.03764 9.82953 9.21169 9.53143 9.32289C9.23331 9.4341 8.91475 9.47989 8.59738 9.45716C8.28 9.43443 7.97122 9.34371 7.69199 9.19116C7.41276 9.0386 7.1696 8.82777 6.97901 8.57298L7.51285 8.17366C7.64618 8.3519 7.81628 8.49939 8.01163 8.60611C8.20697 8.71284 8.42297 8.7763 8.645 8.7922C8.86702 8.8081 9.08987 8.77607 9.29843 8.69827C9.50698 8.62047 9.69637 8.49873 9.85374 8.34131L10.983 7.21202C11.2646 6.91947 11.4203 6.5282 11.4168 6.12211C11.4133 5.7151 11.25 5.32576 10.9622 5.03795C10.6744 4.75014 10.285 4.58689 9.87803 4.58335C9.47179 4.57982 9.08038 4.73569 8.78779 5.01745L8.14092 5.66056L7.67089 5.18778L8.323 4.53952Z" fill="#F5F6F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.46884 6.66948C6.76696 6.55827 7.08552 6.51248 7.40289 6.53521C7.72027 6.55794 8.02905 6.64866 8.30828 6.80122C8.58751 6.95378 8.83067 7.1646 9.02126 7.4194L8.48742 7.81872C8.35409 7.64047 8.18398 7.49299 7.98864 7.38626C7.7933 7.27954 7.5773 7.21607 7.35527 7.20017C7.13325 7.18427 6.9104 7.21631 6.70184 7.2941C6.49329 7.3719 6.3039 7.49364 6.14653 7.65107L5.01725 8.78035C4.7357 9.0729 4.57994 9.46417 4.58347 9.87026C4.58701 10.2773 4.75027 10.6666 5.03808 10.9544C5.32589 11.2422 5.71522 11.4055 6.12224 11.409C6.52833 11.4126 6.9196 11.2568 7.21216 10.9752L7.85489 10.3325L8.32629 10.8039L7.67731 11.4529C7.2588 11.8571 6.69825 12.0807 6.11644 12.0757C5.53463 12.0706 4.97809 11.8372 4.56667 11.4258C4.15526 11.0144 3.92189 10.4579 3.91683 9.87605C3.91178 9.29425 4.13544 8.73373 4.53964 8.31522L4.54367 8.31106L5.67504 7.17975C5.89999 6.95473 6.17074 6.78068 6.46884 6.66948Z" fill="#F5F6F8"/>
+</svg>

package/assets/icons/TikTok16.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="8" fill="black"/>
+<path d="M10.0131 6.70235C10.6133 7.13292 11.3486 7.38626 12.1427 7.38626V5.85268C11.9924 5.85272 11.8425 5.83699 11.6955 5.80573V7.01286C10.9014 7.01286 10.1663 6.75953 9.56591 6.32899V9.45856C9.56591 11.0241 8.30128 12.2932 6.74136 12.2932C6.15932 12.2932 5.61834 12.1166 5.16895 11.8137C5.68186 12.3401 6.39715 12.6665 7.18849 12.6665C8.7485 12.6665 10.0132 11.3975 10.0132 9.83186V6.70235H10.0131ZM10.5648 5.15517C10.2581 4.81887 10.0567 4.38427 10.0131 3.90379V3.70654H9.58933C9.696 4.31722 10.0599 4.83895 10.5648 5.15517ZM6.15559 10.6124C5.98422 10.3869 5.89161 10.111 5.89202 9.82737C5.89202 9.11134 6.47046 8.53077 7.18409 8.53077C7.31709 8.53074 7.44929 8.55118 7.57603 8.59154V7.02369C7.42791 7.00332 7.27842 6.99467 7.129 6.99784V8.21818C7.00216 8.17782 6.86989 8.15732 6.73687 8.15745C6.02323 8.15745 5.44483 8.73795 5.44483 9.45408C5.44483 9.96043 5.73395 10.3988 6.15559 10.6124Z" fill="#FF004F"/>
+<path d="M9.56589 6.32896C10.1662 6.7595 10.9014 7.01283 11.6955 7.01283V5.80569C11.2522 5.71095 10.8598 5.47849 10.5648 5.15517C10.0598 4.83892 9.69598 4.31719 9.5893 3.70654H8.47607V9.8318C8.47355 10.5459 7.89611 11.1241 7.184 11.1241C6.76437 11.1241 6.39157 10.9233 6.15547 10.6124C5.73386 10.3988 5.44474 9.9604 5.44474 9.45411C5.44474 8.73805 6.02315 8.15748 6.73678 8.15748C6.87351 8.15748 7.00529 8.17884 7.12891 8.21821V6.99787C5.5964 7.02965 4.36389 8.28631 4.36389 9.83183C4.36389 10.6033 4.67081 11.3027 5.16895 11.8138C5.61835 12.1166 6.15933 12.2932 6.74137 12.2932C8.30132 12.2932 9.56592 11.0241 9.56592 9.45856V6.32896H9.56589Z" fill="white"/>
+<path d="M11.6954 5.80585V5.47945C11.2957 5.48006 10.9039 5.36773 10.5647 5.15529C10.8649 5.48512 11.2602 5.71254 11.6954 5.80585ZM9.58923 3.7067C9.57905 3.64834 9.57124 3.58959 9.56582 3.53062V3.33337H8.02874V9.45869C8.02629 10.1727 7.44887 10.7509 6.73671 10.7509C6.52763 10.7509 6.33022 10.7011 6.1554 10.6126C6.3915 10.9235 6.7643 11.1242 7.18393 11.1242C7.89597 11.1242 8.47351 10.5461 8.476 9.83198V3.7067H9.58923ZM7.1289 6.99803V6.65055C7.00047 6.63294 6.87098 6.6241 6.74133 6.62416C5.18126 6.62413 3.91663 7.89325 3.91663 9.45869C3.91663 10.4401 4.41365 11.3051 5.16891 11.8139C4.67077 11.3029 4.36385 10.6034 4.36385 9.83195C4.36385 8.28647 5.59633 7.02981 7.1289 6.99803Z" fill="#00F2EA"/>
+</svg>

package/assets/icons/YouTube16.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="8" fill="#363644"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0939 5.27009C12.2358 5.41286 12.3376 5.59038 12.3893 5.78489C12.5805 6.50281 12.5805 7.99995 12.5805 7.99995C12.5805 7.99995 12.5805 9.4971 12.3893 10.215C12.3376 10.4095 12.2358 10.587 12.0939 10.7298C11.952 10.8726 11.7752 10.9756 11.581 11.0285C10.8662 11.2207 8.00905 11.2207 8.00905 11.2207C8.00905 11.2207 5.15191 11.2207 4.4371 11.0285C4.24293 10.9756 4.06606 10.8726 3.92421 10.7298C3.78235 10.587 3.68048 10.4095 3.62879 10.215C3.43762 9.4971 3.43762 7.99995 3.43762 7.99995C3.43762 7.99995 3.43762 6.50281 3.62879 5.78489C3.68048 5.59038 3.78235 5.41286 3.92421 5.27009C4.06606 5.12732 4.24293 5.02432 4.4371 4.97138C5.15191 4.77917 8.00905 4.77917 8.00905 4.77917C8.00905 4.77917 10.8662 4.77917 11.581 4.97138C11.7752 5.02432 11.952 5.12732 12.0939 5.27009ZM9.6775 8.00004L6.85974 6.39697V9.6031L9.6775 8.00004Z" fill="white"/>
+</svg>

package/dist/components/date-picker/Caption.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { CaptionProps } from 'react-day-picker';
+export declare const captionColor: (disabled: boolean) => string;
+export declare const CAPTION_SIZE = 24;
+export interface DatePickerCaptionProps extends CaptionProps {
+    /**
+     * @default false
+     */
+    multipleMonths?: boolean;
+    className?: string;
+    currentMonth?: Date;
+}
+export declare const Caption: ({ multipleMonths, currentMonth: controlledMonth, className, ...props }: DatePickerCaptionProps) => JSX.Element;

package/dist/components/date-picker/DatePicker.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { Matcher } from 'react-day-picker';
+import { CSSValueWithLength } from '../../styles';
+export type displayTimeFormat = 'hourMinute' | 'hourMinuteSecond';
+export declare const DATE_FORMAT = "yyyy.MM.dd";
+export declare const DATE_HOUR_MINUTE_FORMAT = "yyyy.MM.dd HH:mm";
+export declare const DATE_HOUR_MINUTE_SECOND_FORMAT = "yyyy.MM.dd HH:mm:ss";
+export interface DatePickerBaseProps {
+    width?: CSSValueWithLength;
+    error?: boolean;
+    disabled?: boolean;
+    className?: string;
+    showRemoveButton?: boolean;
+    opened?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    canClickOutside?: boolean;
+}
+export interface DatePickerProps extends DatePickerBaseProps {
+    /**
+     * @default '날짜를 선택하세요.'
+     */
+    placeholder?: string;
+    value?: Date;
+    disabledDays?: Matcher | Matcher[];
+    /**
+     * @default false
+     */
+    showTodayButton?: boolean;
+    displayTimeFormat?: displayTimeFormat;
+    /**
+     * @default false
+     * @desc 달력 하단 TimePicker를 노출합니다. onChange value에 시간 정보를 포함하여 전달합니다.
+     */
+    showTimePicker?: boolean;
+    /**
+     * @default false
+     * @desc TimePicker 사용시 Footer 영역은 고정 노출됩니다.
+     */
+    showFooter?: boolean;
+    onChange?: (value: Date | null) => void;
+}
+export declare const DatePicker: ({ width, error, disabled, className, placeholder, displayTimeFormat, value, disabledDays, canClickOutside, showRemoveButton, showTodayButton, showTimePicker, showFooter, onChange, opened: openProp, onOpen, onClose, }: DatePickerProps) => JSX.Element;

package/dist/components/date-picker/DatePicker.stories.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<({ width, error, disabled, className, placeholder, displayTimeFormat, value, disabledDays, canClickOutside, showRemoveButton, showTodayButton, showTimePicker, showFooter, onChange, opened: openProp, onOpen, onClose, }: import("./DatePicker").DatePickerProps) => JSX.Element>;
+export default _default;
+export declare const Base: any;
+export declare const Disabled: any;
+export declare const Error: any;
+export declare const ShowRemoveButton: any;
+export declare const ShowFooter: any;
+export declare const ShowTodayButton: any;
+export declare const ShowTimePicker: any;
+export declare const Opened: any;
+export declare const ShowTimeHourMinute: any;
+export declare const ShowTimeHourMinuteSecond: any;
+export declare const DisableDays: any;

package/dist/components/date-picker/DatePickerIcon.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface DatePickerIconProps {
+    showRemoveIcon?: boolean;
+    onClick?: () => void;
+}
+export declare const DatePickerIcon: ({ showRemoveIcon, onClick }: DatePickerIconProps) => JSX.Element;

package/dist/components/date-picker/DateRangeInput.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { DatePickerIconProps } from './DatePickerIcon';
+import { InputBaseProps } from '../input/InputBase';
+export interface DateRangeInputProps extends Omit<InputBaseProps, 'leftAddon' | 'rightAddon' | 'alignment'> {
+    fromDate?: string;
+    toDate?: string;
+    onClickRemoveButton?: () => void;
+}
+export declare const DateRangeInput: React.ForwardRefExoticComponent<DateRangeInputProps & DatePickerIconProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/date-picker/DateRangePicker.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { DateRange } from 'react-day-picker';
+import { Duration } from 'date-fns';
+import { DatePickerBaseProps } from './DatePicker';
+export type DatePresetItem = {
+    label: string;
+    range: [Date, Date];
+};
+export type DatePreset = DatePresetItem[];
+export type Dates = DateRange;
+export interface DateRangePickerProps extends DatePickerBaseProps {
+    showDatePreset?: boolean;
+    dates?: Dates;
+    minDate?: Date;
+    maxDate?: Date;
+    maxRange?: [number, keyof Duration];
+    customDatePreset?: DatePreset;
+    /**
+     * @default 2
+     * @desc 지정해서 보여지는 개월의 개수를 임의로 조정할 수 있습니다.
+     */
+    numberOfMonths?: number;
+    onChange?: (start: Dates['from'], end: Dates['to']) => void;
+}
+export declare const DateRangePicker: ({ width, error, disabled, className, showDatePreset, dates, maxDate, minDate, maxRange, numberOfMonths, canClickOutside, showRemoveButton, opened: openProp, customDatePreset, onOpen, onClose, onChange, }: DateRangePickerProps) => JSX.Element;

package/dist/components/date-picker/DateRangePicker.stories.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<({ width, error, disabled, className, showDatePreset, dates, maxDate, minDate, maxRange, numberOfMonths, canClickOutside, showRemoveButton, opened: openProp, customDatePreset, onOpen, onClose, onChange, }: import("./DateRangePicker").DateRangePickerProps) => JSX.Element>;
+export default _default;
+export declare const Base: any;
+export declare const Disabled: any;
+export declare const Error: any;
+export declare const Opened: any;
+export declare const ShowRemoveButton: any;
+export declare const NumberOfMonths: any;
+export declare const MinDate: any;
+export declare const MaxDate: any;
+export declare const MaxRange: any;
+export declare const WithDatePreset: any;

package/dist/components/date-picker/DateRangePreset.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DatePreset, DatePresetItem } from './DateRangePicker';
+export interface DateRangePresetProps {
+    selected?: DatePresetItem['label'];
+    items: DatePreset;
+    onChange?: ({ label, range }: DatePresetItem) => void;
+}
+export declare const DataRangePreset: ({ selected, items, onChange }: DateRangePresetProps) => JSX.Element;

package/dist/components/date-picker/DayPickerBase.d.ts

@@ -0,0 +1,3 @@
+export declare const DayPickerBase: import("@emotion/styled").StyledComponent<(import("react-day-picker").DayPickerDefaultProps | import("react-day-picker").DayPickerSingleProps | import("react-day-picker").DayPickerMultipleProps | import("react-day-picker").DayPickerRangeProps) & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/dist/components/date-picker/DayPickerOverlay.d.ts

@@ -0,0 +1,22 @@
+import React, { ReactNode, SetStateAction, Dispatch } from 'react';
+type ContentWithCloseAction = (action: {
+    close(): void;
+}) => ReactNode;
+export interface DayPickerOverlayProps {
+    /** @desc reference element를 구할 수 있는 컴포넌트여야 합니다. */
+    children: React.ReactNode;
+    className?: string;
+    content?: ReactNode | ContentWithCloseAction;
+    /** @default true */
+    canClickOutside?: boolean;
+    /** @default 1035 */
+    zIndex?: number;
+    opened?: boolean;
+    disabled?: boolean;
+    onClose?: () => void;
+    onOpen?: () => void;
+    onCloseOutsidePress?: () => void;
+    setOpened: Dispatch<SetStateAction<boolean>>;
+}
+export declare const DayPickerOverlay: ({ children, className, content, canClickOutside, zIndex, opened: openProp, disabled, onClose, onOpen, onCloseOutsidePress, setOpened, }: DayPickerOverlayProps) => JSX.Element;
+export {};

package/dist/components/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DatePicker';
+export * from './DateRangePicker';

package/dist/components/date-picker/styles.d.ts

@@ -0,0 +1,12 @@
+export declare const date_picker_base_css: import("@emotion/utils").SerializedStyles;
+export declare const caption_button_css: import("@emotion/utils").SerializedStyles;
+export declare const range_input_default_style: {
+    border: string;
+    borderRadius: number;
+    backgroundColor: string;
+    padding: number;
+    transition: string;
+    '&:hover, &:focus, &:focus-within': {
+        borderColor: string;
+    };
+};

package/dist/components/icons/generated/Blog16.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from '.';
+declare const SvgBlog16: ({ size, color, secondaryColor, ...props }: IconProps) => JSX.Element;
+export default SvgBlog16;

package/dist/components/icons/generated/Instagram16.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from '.';
+declare const SvgInstagram16: ({ size, color, secondaryColor, ...props }: IconProps) => JSX.Element;
+export default SvgInstagram16;

package/dist/components/icons/generated/LinkCircle16.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from '.';
+declare const SvgLinkCircle16: ({ size, color, secondaryColor, ...props }: IconProps) => JSX.Element;
+export default SvgLinkCircle16;

package/dist/components/icons/generated/TikTok16.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from '.';
+declare const SvgTikTok16: ({ size, color, secondaryColor, ...props }: IconProps) => JSX.Element;
+export default SvgTikTok16;

package/dist/components/icons/generated/YouTube16.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from '.';
+declare const SvgYouTube16: ({ size, color, secondaryColor, ...props }: IconProps) => JSX.Element;
+export default SvgYouTube16;

package/dist/components/icons/generated/index.d.ts

@@ -32,6 +32,7 @@ export { default as IconBeauty72 } from './Beauty72';
 export { default as IconBelow10 } from './Below10';
 export { default as IconBelow16 } from './Below16';
 export { default as IconBest16 } from './Best16';
+export { default as IconBlog16 } from './Blog16';
 export { default as IconBookmark18 } from './Bookmark18';
 export { default as IconBoost24 } from './Boost24';
 export { default as IconBrand72 } from './Brand72';
@@ -94,9 +95,11 @@ export { default as IconInfo14 } from './Info14';
 export { default as IconInfo16 } from './Info16';
 export { default as IconInfo24 } from './Info24';
 export { default as IconInfoFill20 } from './InfoFill20';
+export { default as IconInstagram16 } from './Instagram16';
 export { default as IconInterest16 } from './Interest16';
 export { default as IconLife72 } from './Life72';
 export { default as IconLink16 } from './Link16';
+export { default as IconLinkCircle16 } from './LinkCircle16';
 export { default as IconLoading24 } from './Loading24';
 export { default as IconLoadingDonuts30 } from './LoadingDonuts30';
 export { default as IconLoadingDots30 } from './LoadingDots30';
@@ -149,6 +152,7 @@ export { default as IconStore50 } from './Store50';
 export { default as IconSubscription24 } from './Subscription24';
 export { default as IconTableMove16 } from './TableMove16';
 export { default as IconThumbup14 } from './Thumbup14';
+export { default as IconTikTok16 } from './TikTok16';
 export { default as IconTip18 } from './Tip18';
 export { default as IconTrend18 } from './Trend18';
 export { default as IconTrendDecreasing18 } from './TrendDecreasing18';
@@ -160,6 +164,7 @@ export { default as IconVideo16 } from './Video16';
 export { default as IconVvip18 } from './Vvip18';
 export { default as IconWarning24 } from './Warning24';
 export { default as IconWon16 } from './Won16';
+export { default as IconYouTube16 } from './YouTube16';
 export { default as IconZigzag16 } from './Zigzag16';
 export { default as IconZigzagCan16 } from './ZigzagCan16';
 export { default as IconZigzagEng16 } from './ZigzagEng16';

package/dist/components/index.d.ts

@@ -22,3 +22,5 @@ export * from './modal';
 export * from './provider';
 export * from './banner';
 export * from './tabs';
+export * from './date-picker';
+export * from './time-picker';

package/dist/components/time-picker/TimePicker.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { CSSValueWithLength } from '../../styles';
+export interface TimePickerProps {
+    className?: string;
+    width?: CSSValueWithLength;
+    error?: boolean;
+    disabled?: boolean;
+    value?: Date;
+    onClose?: () => void;
+    onOpen?: () => void;
+    onChange?: (value: Date | null) => void;
+    incrementMinute?: number;
+    showRemoveButton?: boolean;
+}
+export declare const TimePicker: ({ disabled, value, error, width, className, onOpen, onClose, onChange, incrementMinute, showRemoveButton, }: TimePickerProps) => JSX.Element;

package/dist/components/time-picker/TimePicker.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<({ disabled, value, error, width, className, onOpen, onClose, onChange, incrementMinute, showRemoveButton, }: import("./TimePicker").TimePickerProps) => JSX.Element>;
+export default _default;
+export declare const Base: any;
+export declare const Disabled: any;
+export declare const Error: any;
+export declare const ShowRemoveButton: any;
+export declare const IncrementMinute: any;

package/dist/components/time-picker/TimePickerIcon.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface TimePickerIconProps {
+    showRemoveIcon?: boolean;
+    onClick?: () => void;
+}
+export declare const TimePickerIcon: ({ showRemoveIcon, onClick }: TimePickerIconProps) => JSX.Element;

package/dist/components/time-picker/TimePickerOptions.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export interface TimeOption {
+    label: string;
+    value: number;
+    index: number;
+}
+export interface TimePickerOptionsProps {
+    disabled?: boolean;
+    timeHourPickerOptions: TimeOption[];
+    timeMinutePickerOptions: TimeOption[];
+    selectedTimeHour?: number;
+    selectedTimeMinute?: number;
+    onChangeHour?: (option: number) => void;
+    onChangeMinute?: (option: number) => void;
+}
+export declare const getTimePickerOptions: (length: number, increment?: number) => TimeOption[];
+export declare const getTimePickerOption: (options: TimeOption[], value: TimeOption['value']) => TimeOption;
+export declare const TimePickerOptions: ({ timeHourPickerOptions, timeMinutePickerOptions, selectedTimeHour, selectedTimeMinute, disabled, onChangeHour, onChangeMinute, }: TimePickerOptionsProps) => JSX.Element;

package/dist/components/time-picker/TimePickerOverlay.d.ts

@@ -0,0 +1,20 @@
+import React, { ReactNode, SetStateAction, Dispatch } from 'react';
+type ContentWithCloseAction = (action: {
+    close(): void;
+}) => ReactNode;
+export interface TimePickerOverlayProps {
+    /** @desc reference element를 구할 수 있는 컴포넌트여야 합니다. */
+    children: React.ReactNode;
+    className?: string;
+    content?: ReactNode | ContentWithCloseAction;
+    /** @default 1035 */
+    zIndex?: number;
+    opened?: boolean;
+    disabled?: boolean;
+    onClose?: () => void;
+    onOpen?: () => void;
+    onCloseOutsidePress?: () => void;
+    setOpened: Dispatch<SetStateAction<boolean>>;
+}
+export declare const TimePickerOverlay: ({ children, className, content, zIndex, opened: openProp, disabled, onClose, onOpen, onCloseOutsidePress, setOpened, }: TimePickerOverlayProps) => JSX.Element;
+export {};

package/dist/components/time-picker/TimeRangeInput.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TimePickerIconProps } from './TimePickerIcon';
+import { InputBaseProps } from '../input/InputBase';
+export interface TimeRangeInputProps extends Omit<InputBaseProps, 'leftAddon' | 'rightAddon' | 'alignment'> {
+    fromTime?: string;
+    toTime?: string;
+    onClickRemoveButton?: () => void;
+}
+export declare const TimeRangeInput: React.ForwardRefExoticComponent<TimeRangeInputProps & TimePickerIconProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/time-picker/TimeRangePicker.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { TimePickerProps } from './TimePicker';
+type TimeRange = {
+    from: Date | null;
+    to: Date | null;
+};
+export interface TimeRangePickerProps extends Omit<TimePickerProps, 'value' | 'onChange'> {
+    value?: TimeRange;
+    onChange?: (start: TimeRange['from'], end: TimeRange['to']) => void;
+}
+export declare const TimeRangePicker: ({ disabled, value, error, width, className, onOpen, onClose, onChange, incrementMinute, showRemoveButton, }: TimeRangePickerProps) => JSX.Element;
+export {};

package/dist/components/time-picker/TimeRangePicker.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<({ disabled, value, error, width, className, onOpen, onClose, onChange, incrementMinute, showRemoveButton, }: import("./TimeRangePicker").TimeRangePickerProps) => JSX.Element>;
+export default _default;
+export declare const Base: any;
+export declare const Disabled: any;
+export declare const Error: any;
+export declare const ShowRemoveButton: any;
+export declare const IncrementMinute: any;

package/dist/components/time-picker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TimePicker';
+export * from './TimeRangePicker';

package/dist/components/time-picker/styles.d.ts

@@ -0,0 +1,11 @@
+export declare const time_picker_group_css: import("@emotion/utils").SerializedStyles;
+export declare const range_input_default_style: {
+    border: string;
+    borderRadius: number;
+    backgroundColor: string;
+    padding: number;
+    transition: string;
+    '&:hover, &:focus, &:focus-within': {
+        borderColor: string;
+    };
+};