@tipp/ui 1.0.13 → 1.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (133) hide show
  1. package/dist/.DS_Store +0 -0
  2. package/dist/atoms/date-picker/index.cjs +102 -6
  3. package/dist/atoms/date-picker/index.cjs.map +1 -1
  4. package/dist/atoms/date-picker/index.d.cts +4 -2
  5. package/dist/atoms/date-picker/index.d.ts +4 -2
  6. package/dist/atoms/date-picker/index.js +5 -1
  7. package/dist/atoms/index.cjs +128 -52
  8. package/dist/atoms/index.cjs.map +1 -1
  9. package/dist/atoms/index.d.cts +2 -0
  10. package/dist/atoms/index.d.ts +2 -0
  11. package/dist/atoms/index.js +11 -5
  12. package/dist/atoms/pagination.cjs.map +1 -1
  13. package/dist/atoms/pagination.js +2 -2
  14. package/dist/atoms/toast.cjs +67 -0
  15. package/dist/atoms/toast.cjs.map +1 -0
  16. package/dist/atoms/toast.d.cts +6 -0
  17. package/dist/atoms/toast.d.ts +6 -0
  18. package/dist/atoms/toast.js +10 -0
  19. package/dist/atoms/toast.js.map +1 -0
  20. package/dist/chunk-2ANGYYEV.js +1 -0
  21. package/dist/chunk-2ANGYYEV.js.map +1 -0
  22. package/dist/chunk-2IUGEOUJ.js +90 -0
  23. package/dist/chunk-2IUGEOUJ.js.map +1 -0
  24. package/dist/chunk-4ZFANZDW.js +35 -0
  25. package/dist/chunk-4ZFANZDW.js.map +1 -0
  26. package/dist/chunk-54NO6UR7.js +32 -0
  27. package/dist/chunk-54NO6UR7.js.map +1 -0
  28. package/dist/{chunk-IFRVKLSE.js → chunk-7BE66BFO.js} +2 -2
  29. package/dist/chunk-ABEJI3S7.js +36 -0
  30. package/dist/chunk-ABEJI3S7.js.map +1 -0
  31. package/dist/chunk-AMXLPHAY.js +47 -0
  32. package/dist/chunk-AMXLPHAY.js.map +1 -0
  33. package/dist/{chunk-6ZO2L5PO.js → chunk-ANLWB2QF.js} +9 -9
  34. package/dist/chunk-DJC4JM23.js +175 -0
  35. package/dist/chunk-DJC4JM23.js.map +1 -0
  36. package/dist/chunk-E73BVMP5.js +11 -0
  37. package/dist/chunk-E73BVMP5.js.map +1 -0
  38. package/dist/chunk-FXW6IDLO.js +67 -0
  39. package/dist/chunk-FXW6IDLO.js.map +1 -0
  40. package/dist/{chunk-EK4ZFDYD.js → chunk-HUBPQ7ZR.js} +9 -3
  41. package/dist/{chunk-M474I6JB.js.map → chunk-HUBPQ7ZR.js.map} +1 -1
  42. package/dist/{chunk-M474I6JB.js → chunk-IHQVLRFK.js} +5 -3
  43. package/dist/chunk-IHQVLRFK.js.map +1 -0
  44. package/dist/{chunk-LPUSIN3M.js → chunk-JGV5KQM5.js} +5 -5
  45. package/dist/chunk-JHBYBQ7L.js +95 -0
  46. package/dist/chunk-JHBYBQ7L.js.map +1 -0
  47. package/dist/chunk-LKRALOEW.js +45 -0
  48. package/dist/chunk-LKRALOEW.js.map +1 -0
  49. package/dist/{chunk-PCWFGDAX.js → chunk-M65KRCQ2.js} +5 -5
  50. package/dist/{chunk-MDPBP64D.js → chunk-NSZVLXRG.js} +6 -6
  51. package/dist/chunk-PF27W53W.js +104 -0
  52. package/dist/chunk-PQJ2I6L3.js +67 -0
  53. package/dist/chunk-PQJ2I6L3.js.map +1 -0
  54. package/dist/chunk-Q7IXT5CM.js +119 -0
  55. package/dist/chunk-Q7IXT5CM.js.map +1 -0
  56. package/dist/chunk-QEASTIX4.js +10 -0
  57. package/dist/chunk-QEASTIX4.js.map +1 -0
  58. package/dist/chunk-QIR4QA4A.js +70 -0
  59. package/dist/chunk-QIR4QA4A.js.map +1 -0
  60. package/dist/chunk-TW4EKVGY.js +90 -0
  61. package/dist/chunk-TW4EKVGY.js.map +1 -0
  62. package/dist/chunk-VY43KT3C.js +90 -0
  63. package/dist/chunk-VY43KT3C.js.map +1 -0
  64. package/dist/chunk-ZWTCGCM4.js +95 -0
  65. package/dist/chunk-ZWTCGCM4.js.map +1 -0
  66. package/dist/icon.cjs +4 -0
  67. package/dist/icon.cjs.map +1 -1
  68. package/dist/icon.d.cts +1 -1
  69. package/dist/icon.d.ts +1 -1
  70. package/dist/icon.js +5 -1
  71. package/dist/index.cjs +161 -81
  72. package/dist/index.cjs.map +1 -1
  73. package/dist/index.css +879 -9
  74. package/dist/index.css.map +1 -0
  75. package/dist/index.d.cts +3 -1
  76. package/dist/index.d.ts +3 -1
  77. package/dist/index.js +16 -6
  78. package/dist/molecules/expand-table/index.cjs +124 -51
  79. package/dist/molecules/expand-table/index.cjs.map +1 -1
  80. package/dist/molecules/expand-table/index.js +7 -6
  81. package/dist/molecules/expand-table/row.cjs +106 -33
  82. package/dist/molecules/expand-table/row.cjs.map +1 -1
  83. package/dist/molecules/expand-table/row.js +6 -5
  84. package/dist/molecules/index.cjs +131 -58
  85. package/dist/molecules/index.cjs.map +1 -1
  86. package/dist/molecules/index.js +7 -6
  87. package/dist/molecules/navigation.cjs +107 -34
  88. package/dist/molecules/navigation.cjs.map +1 -1
  89. package/dist/molecules/navigation.js +5 -4
  90. package/package.json +5 -4
  91. package/src/atoms/date-picker/index.tsx +157 -5
  92. package/src/atoms/index.ts +2 -0
  93. package/src/atoms/toast.tsx +23 -0
  94. package/src/icon.ts +2 -0
  95. package/src/molecules/expand-table/row.tsx +1 -1
  96. package/dist/chunk-3ZUBNWIB.js +0 -43
  97. package/dist/chunk-3ZUBNWIB.js.map +0 -1
  98. package/dist/chunk-7FECZT7I.js +0 -45
  99. package/dist/chunk-7FECZT7I.js.map +0 -1
  100. package/dist/chunk-7WNX674B.js +0 -42
  101. package/dist/chunk-7WNX674B.js.map +0 -1
  102. package/dist/chunk-AAXOSNY3.js +0 -41
  103. package/dist/chunk-AAXOSNY3.js.map +0 -1
  104. package/dist/chunk-D6MXCND3.js +0 -33
  105. package/dist/chunk-D6MXCND3.js.map +0 -1
  106. package/dist/chunk-EK4ZFDYD.js.map +0 -1
  107. package/dist/chunk-HVTHVIGL.js +0 -38
  108. package/dist/chunk-HVTHVIGL.js.map +0 -1
  109. package/dist/chunk-LW3VKJJS.js +0 -33
  110. package/dist/chunk-LW3VKJJS.js.map +0 -1
  111. package/dist/chunk-O5IB6OHB.js +0 -41
  112. package/dist/chunk-O5IB6OHB.js.map +0 -1
  113. package/dist/chunk-R6PYUH56.js +0 -104
  114. package/dist/chunk-S3SAB2S2.js +0 -104
  115. package/dist/chunk-S3SAB2S2.js.map +0 -1
  116. package/dist/chunk-TPTFBY6E.js +0 -40
  117. package/dist/chunk-TPTFBY6E.js.map +0 -1
  118. package/dist/chunk-VRFAOMNZ.js +0 -33
  119. package/dist/chunk-VRFAOMNZ.js.map +0 -1
  120. package/dist/chunk-WJY4BPLR.js +0 -43
  121. package/dist/chunk-WJY4BPLR.js.map +0 -1
  122. package/dist/chunk-WVS3CXK5.js +0 -104
  123. package/dist/chunk-WVS3CXK5.js.map +0 -1
  124. package/dist/chunk-YQQVYFIL.js +0 -37
  125. package/dist/chunk-YQQVYFIL.js.map +0 -1
  126. package/dist/chunk-ZRCRQ7IC.js +0 -42
  127. package/dist/chunk-ZRCRQ7IC.js.map +0 -1
  128. /package/dist/{chunk-IFRVKLSE.js.map → chunk-7BE66BFO.js.map} +0 -0
  129. /package/dist/{chunk-6ZO2L5PO.js.map → chunk-ANLWB2QF.js.map} +0 -0
  130. /package/dist/{chunk-LPUSIN3M.js.map → chunk-JGV5KQM5.js.map} +0 -0
  131. /package/dist/{chunk-MDPBP64D.js.map → chunk-M65KRCQ2.js.map} +0 -0
  132. /package/dist/{chunk-PCWFGDAX.js.map → chunk-NSZVLXRG.js.map} +0 -0
  133. /package/dist/{chunk-R6PYUH56.js.map → chunk-PF27W53W.js.map} +0 -0
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/atoms/date-picker/index.tsx"],"sourcesContent":["import type { ElementRef } from 'react';\nimport React, { forwardRef, useCallback, useState } from 'react';\nimport type { DatePickerProps as ReactDatePickerProps } from 'react-datepicker';\nimport ReactDatePicker from 'react-datepicker';\nimport { IconButton } from '../icon-button';\nimport { Flex } from '../flex';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../../icon';\nimport { Heading } from '../heading';\nimport { Select } from '../select';\nimport { Button } from '../button';\nimport { Box } from '../box';\n\ntype DatePickerProps = ReactDatePickerProps & {\n size?: 'small' | 'medium' | 'large';\n};\ntype DatePickerRef = ElementRef<typeof ReactDatePicker>;\n\nconst DatePicker = forwardRef<DatePickerRef, DatePickerProps>(\n (props: DatePickerProps, ref): React.ReactNode => {\n const { size = 'medium', ...rest } = props;\n\n return (\n <ReactDatePicker\n placeholderText=\"yyyy/mm/dd\"\n ref={ref}\n showPopperArrow={false}\n {...rest}\n calendarClassName={`tipp_datePicker_calendar ${rest.calendarClassName || ''}`}\n dateFormat=\"yyyy/MM/dd\"\n nextMonthButtonLabel=\"다음 달\"\n previousMonthButtonLabel=\"이전 달\"\n // renderCustomHeader={renderCustomHeader}\n renderCustomHeader={renderCustomHeader}\n wrapperClassName={`tipp_datePicker ${size} ${rest.wrapperClassName || ''}`}\n />\n );\n }\n);\nconst renderCustomHeader: ReactDatePickerProps['renderCustomHeader'] = (\n props\n) => {\n const {\n date,\n decreaseMonth,\n increaseMonth,\n prevMonthButtonDisabled,\n nextMonthButtonDisabled,\n } = props;\n\n const year = date.getFullYear();\n const month = date.getMonth();\n\n return (\n <Flex align=\"center\" justify=\"between\" pb=\"2\" pl=\"2\" pr=\"2\">\n <IconButton\n disabled={prevMonthButtonDisabled}\n onClick={decreaseMonth}\n variant=\"ghost\"\n >\n <ChevronLeftIcon />\n </IconButton>\n <Flex gap=\"3\">\n <Heading variant=\"subtitle1\" weight=\"regular\">\n {year}년\n </Heading>\n <Heading variant=\"subtitle1\" weight=\"regular\">\n {month + 1}월\n </Heading>\n </Flex>\n\n <IconButton\n disabled={nextMonthButtonDisabled}\n onClick={increaseMonth}\n variant=\"ghost\"\n >\n <ChevronRightIcon />\n </IconButton>\n </Flex>\n );\n};\n\n// const renderCustomHeader: ReactDatePickerProps['renderCustomHeader'] = (\n// props\n// ) => {\n// const {\n// date,\n// decreaseMonth,\n// increaseMonth,\n// changeMonth,\n// changeYear,\n// prevMonthButtonDisabled,\n// nextMonthButtonDisabled,\n// } = props;\n\n// const SelectTriggerProps: Select.TriggerProps = {\n// variant: 'ghost',\n// };\n// const year = date.getFullYear();\n// const month = date.getMonth();\n\n// return (\n// <Flex align=\"center\" justify=\"between\" pb=\"2\" pl=\"2\" pr=\"2\">\n// <IconButton\n// disabled={prevMonthButtonDisabled}\n// onClick={decreaseMonth}\n// variant=\"ghost\"\n// >\n// <ChevronLeftIcon />\n// </IconButton>\n// <Flex gap=\"3\">\n// <Select.Root\n// onValueChange={(value) => {\n// console.log({ value });\n// changeYear(Number(value));\n// }}\n// value={year.toString()}\n// >\n// <Select.Trigger {...SelectTriggerProps}>\n// <Heading variant=\"subtitle1\" weight=\"regular\">\n// {year}년\n// </Heading>\n// </Select.Trigger>\n// <Select.Content>\n// {Array.from({ length: 5 })\n// .map((_, i) => {\n// const toYear = new Date().getFullYear();\n// const v = toYear + i + 1;\n// return (\n// <Select.Item key={v} value={v.toString()}>\n// {v}년\n// </Select.Item>\n// );\n// })\n// .reverse()}\n\n// {Array.from({ length: 60 }).map((_, i) => {\n// const toYear = new Date().getFullYear();\n// const v = toYear - i;\n// return (\n// <Select.Item key={v} value={v.toString()}>\n// {v}년\n// </Select.Item>\n// );\n// })}\n// </Select.Content>\n// </Select.Root>\n// <Select.Root\n// onValueChange={(value) => {\n// changeMonth(Number(value));\n// }}\n// value={month.toString()}\n// >\n// <Select.Trigger {...SelectTriggerProps}>\n// <Heading variant=\"subtitle1\" weight=\"regular\">\n// {month + 1}월\n// </Heading>\n// </Select.Trigger>\n// <Select.Content>\n// {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((m) => (\n// <Select.Item key={m} value={m.toString()}>\n// {m + 1}월\n// </Select.Item>\n// ))}\n// </Select.Content>\n// </Select.Root>\n// </Flex>\n\n// <IconButton\n// disabled={nextMonthButtonDisabled}\n// onClick={increaseMonth}\n// variant=\"ghost\"\n// >\n// <ChevronRightIcon />\n// </IconButton>\n// </Flex>\n// );\n// };\n\nDatePicker.displayName = 'DatePicker';\n\nexport { DatePicker, type DatePickerProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AACA,SAAgB,kBAAyC;AAEzD,OAAO,qBAAqB;AAmBtB,cAwCE,YAxCF;AALN,IAAM,aAAa;AAAA,EACjB,CAAC,OAAwB,QAAyB;AAChD,UAAqC,YAA7B,SAAO,SAnBnB,IAmByC,IAAT,iBAAS,IAAT,CAApB;AAER,WACE;AAAA,MAAC;AAAA;AAAA,QACC,iBAAgB;AAAA,QAChB;AAAA,QACA,iBAAiB;AAAA,SACb,OAJL;AAAA,QAKC,mBAAmB,4BAA4B,KAAK,qBAAqB,EAAE;AAAA,QAC3E,YAAW;AAAA,QACX,sBAAqB;AAAA,QACrB,0BAAyB;AAAA,QAEzB;AAAA,QACA,kBAAkB,mBAAmB,IAAI,IAAI,KAAK,oBAAoB,EAAE;AAAA;AAAA,IAC1E;AAAA,EAEJ;AACF;AACA,IAAM,qBAAiE,CACrE,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,OAAO,KAAK,YAAY;AAC9B,QAAM,QAAQ,KAAK,SAAS;AAE5B,SACE,qBAAC,QAAK,OAAM,UAAS,SAAQ,WAAU,IAAG,KAAI,IAAG,KAAI,IAAG,KACtD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,SAAS;AAAA,QACT,SAAQ;AAAA,QAER,8BAAC,mBAAgB;AAAA;AAAA,IACnB;AAAA,IACA,qBAAC,QAAK,KAAI,KACR;AAAA,2BAAC,WAAQ,SAAQ,aAAY,QAAO,WACjC;AAAA;AAAA,QAAK;AAAA,SACR;AAAA,MACA,qBAAC,WAAQ,SAAQ,aAAY,QAAO,WACjC;AAAA,gBAAQ;AAAA,QAAE;AAAA,SACb;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,SAAS;AAAA,QACT,SAAQ;AAAA,QAER,8BAAC,oBAAiB;AAAA;AAAA,IACpB;AAAA,KACF;AAEJ;AAmGA,WAAW,cAAc;","names":[]}
@@ -0,0 +1,90 @@
1
+ import {
2
+ Flex
3
+ } from "./chunk-25HMMI7R.js";
4
+ import {
5
+ Heading
6
+ } from "./chunk-HLOY6BIP.js";
7
+ import {
8
+ IconButton
9
+ } from "./chunk-O3DNDMV3.js";
10
+ import {
11
+ ChevronLeftIcon,
12
+ ChevronRightIcon
13
+ } from "./chunk-HUBPQ7ZR.js";
14
+ import {
15
+ __objRest,
16
+ __spreadProps,
17
+ __spreadValues
18
+ } from "./chunk-N552FDTV.js";
19
+
20
+ // src/atoms/date-picker/index.tsx
21
+ import { forwardRef } from "react";
22
+ import ReactDatePicker from "react-datepicker";
23
+ import { jsx, jsxs } from "react/jsx-runtime";
24
+ var DatePicker = forwardRef(
25
+ (props, ref) => {
26
+ const _a = props, { size = "medium" } = _a, rest = __objRest(_a, ["size"]);
27
+ return /* @__PURE__ */ jsx(
28
+ ReactDatePicker,
29
+ __spreadProps(__spreadValues({
30
+ placeholderText: "yyyy/mm/dd",
31
+ ref,
32
+ showPopperArrow: false
33
+ }, rest), {
34
+ calendarClassName: `tipp_datePicker_calendar ${rest.calendarClassName || ""}`,
35
+ dateFormat: "yyyy/MM/dd",
36
+ nextMonthButtonLabel: "\uB2E4\uC74C \uB2EC",
37
+ previousMonthButtonLabel: "\uC774\uC804 \uB2EC",
38
+ renderCustomHeader,
39
+ wrapperClassName: `tipp_datePicker ${size} ${rest.wrapperClassName || ""}`
40
+ })
41
+ );
42
+ }
43
+ );
44
+ var renderCustomHeader = (props) => {
45
+ const {
46
+ date,
47
+ decreaseMonth,
48
+ increaseMonth,
49
+ prevMonthButtonDisabled,
50
+ nextMonthButtonDisabled
51
+ } = props;
52
+ const year = date.getFullYear();
53
+ const month = date.getMonth();
54
+ return /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", pb: "2", pl: "2", pr: "2", children: [
55
+ /* @__PURE__ */ jsx(
56
+ IconButton,
57
+ {
58
+ disabled: prevMonthButtonDisabled,
59
+ onClick: decreaseMonth,
60
+ variant: "ghost",
61
+ children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
62
+ }
63
+ ),
64
+ /* @__PURE__ */ jsxs(Flex, { gap: "3", children: [
65
+ /* @__PURE__ */ jsxs(Heading, { variant: "subtitle1", weight: "regular", children: [
66
+ year,
67
+ "\uB144"
68
+ ] }),
69
+ /* @__PURE__ */ jsxs(Heading, { variant: "subtitle1", weight: "regular", children: [
70
+ month + 1,
71
+ "\uC6D4"
72
+ ] })
73
+ ] }),
74
+ /* @__PURE__ */ jsx(
75
+ IconButton,
76
+ {
77
+ disabled: nextMonthButtonDisabled,
78
+ onClick: increaseMonth,
79
+ variant: "ghost",
80
+ children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
81
+ }
82
+ )
83
+ ] });
84
+ };
85
+ DatePicker.displayName = "DatePicker";
86
+
87
+ export {
88
+ DatePicker
89
+ };
90
+ //# sourceMappingURL=chunk-VY43KT3C.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/atoms/date-picker/index.tsx"],"sourcesContent":["import type { ElementRef } from 'react';\nimport React, { forwardRef } from 'react';\nimport type { DatePickerProps as ReactDatePickerProps } from 'react-datepicker';\nimport ReactDatePicker from 'react-datepicker';\nimport { IconButton } from '../icon-button';\nimport { Flex } from '../flex';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../../icon';\nimport { Heading } from '../heading';\n\ntype DatePickerProps = ReactDatePickerProps & {\n size?: 'small' | 'medium' | 'large';\n};\ntype DatePickerRef = ElementRef<typeof ReactDatePicker>;\n\nconst DatePicker = forwardRef<DatePickerRef, DatePickerProps>(\n (props: DatePickerProps, ref): React.ReactNode => {\n const { size = 'medium', ...rest } = props;\n\n return (\n <ReactDatePicker\n placeholderText=\"yyyy/mm/dd\"\n ref={ref}\n showPopperArrow={false}\n {...rest}\n calendarClassName={`tipp_datePicker_calendar ${rest.calendarClassName || ''}`}\n dateFormat=\"yyyy/MM/dd\"\n nextMonthButtonLabel=\"다음 달\"\n previousMonthButtonLabel=\"이전 달\"\n renderCustomHeader={renderCustomHeader}\n wrapperClassName={`tipp_datePicker ${size} ${rest.wrapperClassName || ''}`}\n />\n );\n }\n);\nconst renderCustomHeader: ReactDatePickerProps['renderCustomHeader'] = (\n props\n) => {\n const {\n date,\n decreaseMonth,\n increaseMonth,\n prevMonthButtonDisabled,\n nextMonthButtonDisabled,\n } = props;\n\n const year = date.getFullYear();\n const month = date.getMonth();\n\n return (\n <Flex align=\"center\" justify=\"between\" pb=\"2\" pl=\"2\" pr=\"2\">\n <IconButton\n disabled={prevMonthButtonDisabled}\n onClick={decreaseMonth}\n variant=\"ghost\"\n >\n <ChevronLeftIcon />\n </IconButton>\n <Flex gap=\"3\">\n <Heading variant=\"subtitle1\" weight=\"regular\">\n {year}년\n </Heading>\n <Heading variant=\"subtitle1\" weight=\"regular\">\n {month + 1}월\n </Heading>\n </Flex>\n\n <IconButton\n disabled={nextMonthButtonDisabled}\n onClick={increaseMonth}\n variant=\"ghost\"\n >\n <ChevronRightIcon />\n </IconButton>\n </Flex>\n );\n};\n\n// const renderCustomHeader: ReactDatePickerProps['renderCustomHeader'] = (\n// props\n// ) => {\n// const {\n// date,\n// decreaseMonth,\n// increaseMonth,\n// changeMonth,\n// changeYear,\n// prevMonthButtonDisabled,\n// nextMonthButtonDisabled,\n// } = props;\n\n// const SelectTriggerProps: Select.TriggerProps = {\n// variant: 'ghost',\n// };\n// const year = date.getFullYear();\n// const month = date.getMonth();\n\n// return (\n// <Flex align=\"center\" justify=\"between\" pb=\"2\" pl=\"2\" pr=\"2\">\n// <IconButton\n// disabled={prevMonthButtonDisabled}\n// onClick={decreaseMonth}\n// variant=\"ghost\"\n// >\n// <ChevronLeftIcon />\n// </IconButton>\n// <Flex gap=\"3\">\n// <Select.Root\n// onValueChange={(value) => {\n// console.log({ value });\n// changeYear(Number(value));\n// }}\n// value={year.toString()}\n// >\n// <Select.Trigger {...SelectTriggerProps}>\n// <Heading variant=\"subtitle1\" weight=\"regular\">\n// {year}년\n// </Heading>\n// </Select.Trigger>\n// <Select.Content>\n// {Array.from({ length: 5 })\n// .map((_, i) => {\n// const toYear = new Date().getFullYear();\n// const v = toYear + i + 1;\n// return (\n// <Select.Item key={v} value={v.toString()}>\n// {v}년\n// </Select.Item>\n// );\n// })\n// .reverse()}\n\n// {Array.from({ length: 60 }).map((_, i) => {\n// const toYear = new Date().getFullYear();\n// const v = toYear - i;\n// return (\n// <Select.Item key={v} value={v.toString()}>\n// {v}년\n// </Select.Item>\n// );\n// })}\n// </Select.Content>\n// </Select.Root>\n// <Select.Root\n// onValueChange={(value) => {\n// changeMonth(Number(value));\n// }}\n// value={month.toString()}\n// >\n// <Select.Trigger {...SelectTriggerProps}>\n// <Heading variant=\"subtitle1\" weight=\"regular\">\n// {month + 1}월\n// </Heading>\n// </Select.Trigger>\n// <Select.Content>\n// {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((m) => (\n// <Select.Item key={m} value={m.toString()}>\n// {m + 1}월\n// </Select.Item>\n// ))}\n// </Select.Content>\n// </Select.Root>\n// </Flex>\n\n// <IconButton\n// disabled={nextMonthButtonDisabled}\n// onClick={increaseMonth}\n// variant=\"ghost\"\n// >\n// <ChevronRightIcon />\n// </IconButton>\n// </Flex>\n// );\n// };\n\nDatePicker.displayName = 'DatePicker';\n\nexport { DatePicker, type DatePickerProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AACA,SAAgB,kBAAkB;AAElC,OAAO,qBAAqB;AAgBtB,cAuCE,YAvCF;AALN,IAAM,aAAa;AAAA,EACjB,CAAC,OAAwB,QAAyB;AAChD,UAAqC,YAA7B,SAAO,SAhBnB,IAgByC,IAAT,iBAAS,IAAT,CAApB;AAER,WACE;AAAA,MAAC;AAAA;AAAA,QACC,iBAAgB;AAAA,QAChB;AAAA,QACA,iBAAiB;AAAA,SACb,OAJL;AAAA,QAKC,mBAAmB,4BAA4B,KAAK,qBAAqB,EAAE;AAAA,QAC3E,YAAW;AAAA,QACX,sBAAqB;AAAA,QACrB,0BAAyB;AAAA,QACzB;AAAA,QACA,kBAAkB,mBAAmB,IAAI,IAAI,KAAK,oBAAoB,EAAE;AAAA;AAAA,IAC1E;AAAA,EAEJ;AACF;AACA,IAAM,qBAAiE,CACrE,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,OAAO,KAAK,YAAY;AAC9B,QAAM,QAAQ,KAAK,SAAS;AAE5B,SACE,qBAAC,QAAK,OAAM,UAAS,SAAQ,WAAU,IAAG,KAAI,IAAG,KAAI,IAAG,KACtD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,SAAS;AAAA,QACT,SAAQ;AAAA,QAER,8BAAC,mBAAgB;AAAA;AAAA,IACnB;AAAA,IACA,qBAAC,QAAK,KAAI,KACR;AAAA,2BAAC,WAAQ,SAAQ,aAAY,QAAO,WACjC;AAAA;AAAA,QAAK;AAAA,SACR;AAAA,MACA,qBAAC,WAAQ,SAAQ,aAAY,QAAO,WACjC;AAAA,gBAAQ;AAAA,QAAE;AAAA,SACb;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,SAAS;AAAA,QACT,SAAQ;AAAA,QAER,8BAAC,oBAAiB;AAAA;AAAA,IACpB;AAAA,KACF;AAEJ;AAmGA,WAAW,cAAc;","names":[]}
@@ -0,0 +1,95 @@
1
+ import {
2
+ Flex
3
+ } from "./chunk-25HMMI7R.js";
4
+ import {
5
+ Heading
6
+ } from "./chunk-HLOY6BIP.js";
7
+ import {
8
+ IconButton
9
+ } from "./chunk-O3DNDMV3.js";
10
+ import {
11
+ ChevronLeftIcon,
12
+ ChevronRightIcon
13
+ } from "./chunk-IHQVLRFK.js";
14
+ import {
15
+ __objRest,
16
+ __spreadProps,
17
+ __spreadValues
18
+ } from "./chunk-N552FDTV.js";
19
+
20
+ // src/atoms/date-picker/index.tsx
21
+ import { forwardRef } from "react";
22
+ import ReactDatePicker from "react-datepicker";
23
+ import { jsx, jsxs } from "react/jsx-runtime";
24
+ var DatePicker = forwardRef(
25
+ (props, ref) => {
26
+ const _a = props, { size = "medium" } = _a, rest = __objRest(_a, ["size"]);
27
+ return /* @__PURE__ */ jsx(
28
+ ReactDatePicker,
29
+ __spreadProps(__spreadValues({
30
+ placeholderText: "yyyy/mm/dd",
31
+ ref,
32
+ showPopperArrow: false
33
+ }, rest), {
34
+ calendarClassName: `tipp_datePicker_calendar ${rest.calendarClassName || ""}`,
35
+ dateFormat: "yyyy/MM/dd",
36
+ nextMonthButtonLabel: "\uB2E4\uC74C \uB2EC",
37
+ previousMonthButtonLabel: "\uC774\uC804 \uB2EC",
38
+ renderCustomHeader,
39
+ wrapperClassName: `tipp_datePicker ${size} ${rest.wrapperClassName || ""}`
40
+ })
41
+ );
42
+ }
43
+ );
44
+ var renderCustomHeader = (props) => {
45
+ const {
46
+ date,
47
+ decreaseMonth,
48
+ increaseMonth,
49
+ changeMonth,
50
+ changeYear,
51
+ prevMonthButtonDisabled,
52
+ nextMonthButtonDisabled
53
+ } = props;
54
+ const SelectTriggerProps = {
55
+ variant: "ghost"
56
+ };
57
+ const year = date.getFullYear();
58
+ const month = date.getMonth();
59
+ return /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", pb: "2", pl: "2", pr: "2", children: [
60
+ /* @__PURE__ */ jsx(
61
+ IconButton,
62
+ {
63
+ disabled: prevMonthButtonDisabled,
64
+ onClick: decreaseMonth,
65
+ variant: "ghost",
66
+ children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
67
+ }
68
+ ),
69
+ /* @__PURE__ */ jsxs(Flex, { gap: "3", children: [
70
+ /* @__PURE__ */ jsxs(Heading, { variant: "subtitle1", weight: "regular", children: [
71
+ year,
72
+ "\uB144"
73
+ ] }),
74
+ /* @__PURE__ */ jsxs(Heading, { variant: "subtitle1", weight: "regular", children: [
75
+ month + 1,
76
+ "\uC6D4"
77
+ ] })
78
+ ] }),
79
+ /* @__PURE__ */ jsx(
80
+ IconButton,
81
+ {
82
+ disabled: nextMonthButtonDisabled,
83
+ onClick: increaseMonth,
84
+ variant: "ghost",
85
+ children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
86
+ }
87
+ )
88
+ ] });
89
+ };
90
+ DatePicker.displayName = "DatePicker";
91
+
92
+ export {
93
+ DatePicker
94
+ };
95
+ //# sourceMappingURL=chunk-ZWTCGCM4.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/atoms/date-picker/index.tsx"],"sourcesContent":["import type { ElementRef } from 'react';\nimport React, { forwardRef, useCallback, useState } from 'react';\nimport type { DatePickerProps as ReactDatePickerProps } from 'react-datepicker';\nimport ReactDatePicker from 'react-datepicker';\nimport { IconButton } from '../icon-button';\nimport { Flex } from '../flex';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../../icon';\nimport { Heading } from '../heading';\nimport { Select } from '../select';\nimport { Button } from '../button';\nimport { Box } from '../box';\n\ntype DatePickerProps = ReactDatePickerProps & {\n size?: 'small' | 'medium' | 'large';\n};\ntype DatePickerRef = ElementRef<typeof ReactDatePicker>;\n\nconst DatePicker = forwardRef<DatePickerRef, DatePickerProps>(\n (props: DatePickerProps, ref): React.ReactNode => {\n const { size = 'medium', ...rest } = props;\n\n return (\n <ReactDatePicker\n placeholderText=\"yyyy/mm/dd\"\n ref={ref}\n showPopperArrow={false}\n {...rest}\n calendarClassName={`tipp_datePicker_calendar ${rest.calendarClassName || ''}`}\n dateFormat=\"yyyy/MM/dd\"\n nextMonthButtonLabel=\"다음 달\"\n previousMonthButtonLabel=\"이전 달\"\n // renderCustomHeader={renderCustomHeader}\n renderCustomHeader={renderCustomHeader}\n wrapperClassName={`tipp_datePicker ${size} ${rest.wrapperClassName || ''}`}\n />\n );\n }\n);\nconst renderCustomHeader: ReactDatePickerProps['renderCustomHeader'] = (\n props\n) => {\n const {\n date,\n decreaseMonth,\n increaseMonth,\n changeMonth,\n changeYear,\n prevMonthButtonDisabled,\n nextMonthButtonDisabled,\n } = props;\n\n const SelectTriggerProps: Select.TriggerProps = {\n variant: 'ghost',\n };\n const year = date.getFullYear();\n const month = date.getMonth();\n\n return (\n <Flex align=\"center\" justify=\"between\" pb=\"2\" pl=\"2\" pr=\"2\">\n <IconButton\n disabled={prevMonthButtonDisabled}\n onClick={decreaseMonth}\n variant=\"ghost\"\n >\n <ChevronLeftIcon />\n </IconButton>\n <Flex gap=\"3\">\n <Heading variant=\"subtitle1\" weight=\"regular\">\n {year}년\n </Heading>\n <Heading variant=\"subtitle1\" weight=\"regular\">\n {month + 1}월\n </Heading>\n </Flex>\n\n <IconButton\n disabled={nextMonthButtonDisabled}\n onClick={increaseMonth}\n variant=\"ghost\"\n >\n <ChevronRightIcon />\n </IconButton>\n </Flex>\n );\n};\n\n// const renderCustomHeader: ReactDatePickerProps['renderCustomHeader'] = (\n// props\n// ) => {\n// const {\n// date,\n// decreaseMonth,\n// increaseMonth,\n// changeMonth,\n// changeYear,\n// prevMonthButtonDisabled,\n// nextMonthButtonDisabled,\n// } = props;\n\n// const SelectTriggerProps: Select.TriggerProps = {\n// variant: 'ghost',\n// };\n// const year = date.getFullYear();\n// const month = date.getMonth();\n\n// return (\n// <Flex align=\"center\" justify=\"between\" pb=\"2\" pl=\"2\" pr=\"2\">\n// <IconButton\n// disabled={prevMonthButtonDisabled}\n// onClick={decreaseMonth}\n// variant=\"ghost\"\n// >\n// <ChevronLeftIcon />\n// </IconButton>\n// <Flex gap=\"3\">\n// <Select.Root\n// onValueChange={(value) => {\n// console.log({ value });\n// changeYear(Number(value));\n// }}\n// value={year.toString()}\n// >\n// <Select.Trigger {...SelectTriggerProps}>\n// <Heading variant=\"subtitle1\" weight=\"regular\">\n// {year}년\n// </Heading>\n// </Select.Trigger>\n// <Select.Content>\n// {Array.from({ length: 5 })\n// .map((_, i) => {\n// const toYear = new Date().getFullYear();\n// const v = toYear + i + 1;\n// return (\n// <Select.Item key={v} value={v.toString()}>\n// {v}년\n// </Select.Item>\n// );\n// })\n// .reverse()}\n\n// {Array.from({ length: 60 }).map((_, i) => {\n// const toYear = new Date().getFullYear();\n// const v = toYear - i;\n// return (\n// <Select.Item key={v} value={v.toString()}>\n// {v}년\n// </Select.Item>\n// );\n// })}\n// </Select.Content>\n// </Select.Root>\n// <Select.Root\n// onValueChange={(value) => {\n// changeMonth(Number(value));\n// }}\n// value={month.toString()}\n// >\n// <Select.Trigger {...SelectTriggerProps}>\n// <Heading variant=\"subtitle1\" weight=\"regular\">\n// {month + 1}월\n// </Heading>\n// </Select.Trigger>\n// <Select.Content>\n// {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((m) => (\n// <Select.Item key={m} value={m.toString()}>\n// {m + 1}월\n// </Select.Item>\n// ))}\n// </Select.Content>\n// </Select.Root>\n// </Flex>\n\n// <IconButton\n// disabled={nextMonthButtonDisabled}\n// onClick={increaseMonth}\n// variant=\"ghost\"\n// >\n// <ChevronRightIcon />\n// </IconButton>\n// </Flex>\n// );\n// };\n\nDatePicker.displayName = 'DatePicker';\n\nexport { DatePicker, type DatePickerProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AACA,SAAgB,kBAAyC;AAEzD,OAAO,qBAAqB;AAmBtB,cA6CE,YA7CF;AALN,IAAM,aAAa;AAAA,EACjB,CAAC,OAAwB,QAAyB;AAChD,UAAqC,YAA7B,SAAO,SAnBnB,IAmByC,IAAT,iBAAS,IAAT,CAApB;AAER,WACE;AAAA,MAAC;AAAA;AAAA,QACC,iBAAgB;AAAA,QAChB;AAAA,QACA,iBAAiB;AAAA,SACb,OAJL;AAAA,QAKC,mBAAmB,4BAA4B,KAAK,qBAAqB,EAAE;AAAA,QAC3E,YAAW;AAAA,QACX,sBAAqB;AAAA,QACrB,0BAAyB;AAAA,QAEzB;AAAA,QACA,kBAAkB,mBAAmB,IAAI,IAAI,KAAK,oBAAoB,EAAE;AAAA;AAAA,IAC1E;AAAA,EAEJ;AACF;AACA,IAAM,qBAAiE,CACrE,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,qBAA0C;AAAA,IAC9C,SAAS;AAAA,EACX;AACA,QAAM,OAAO,KAAK,YAAY;AAC9B,QAAM,QAAQ,KAAK,SAAS;AAE5B,SACE,qBAAC,QAAK,OAAM,UAAS,SAAQ,WAAU,IAAG,KAAI,IAAG,KAAI,IAAG,KACtD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,SAAS;AAAA,QACT,SAAQ;AAAA,QAER,8BAAC,mBAAgB;AAAA;AAAA,IACnB;AAAA,IACA,qBAAC,QAAK,KAAI,KACR;AAAA,2BAAC,WAAQ,SAAQ,aAAY,QAAO,WACjC;AAAA;AAAA,QAAK;AAAA,SACR;AAAA,MACA,qBAAC,WAAQ,SAAQ,aAAY,QAAO,WACjC;AAAA,gBAAQ;AAAA,QAAE;AAAA,SACb;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,SAAS;AAAA,QACT,SAAQ;AAAA,QAER,8BAAC,oBAAiB;AAAA;AAAA,IACpB;AAAA,KACF;AAEJ;AAmGA,WAAW,cAAc;","names":[]}
package/dist/icon.cjs CHANGED
@@ -27,6 +27,7 @@ __export(icon_exports, {
27
27
  ChevronLeftIcon: () => import_react_icons.ChevronLeftIcon,
28
28
  ChevronRightIcon: () => import_react_icons.ChevronRightIcon,
29
29
  ClipboardIcon: () => import_react_icons.ClipboardIcon,
30
+ Cross1Icon: () => import_react_icons.Cross1Icon,
30
31
  DotsHorizontalIcon: () => import_react_icons.DotsHorizontalIcon,
31
32
  DotsVerticalIcon: () => import_react_icons.DotsVerticalIcon,
32
33
  ExclamationTriangleIcon: () => import_react_icons.ExclamationTriangleIcon,
@@ -35,6 +36,7 @@ __export(icon_exports, {
35
36
  InfoCircledIcon: () => import_react_icons.InfoCircledIcon,
36
37
  MagnifyingGlassIcon: () => import_react_icons.MagnifyingGlassIcon,
37
38
  MixerHorizontalIcon: () => import_react_icons.MixerHorizontalIcon,
39
+ Pencil1Icon: () => import_react_icons.Pencil1Icon,
38
40
  PersonIcon: () => import_react_icons.PersonIcon,
39
41
  PlusIcon: () => import_react_icons.PlusIcon
40
42
  });
@@ -49,6 +51,7 @@ var import_react_icons = require("@radix-ui/react-icons");
49
51
  ChevronLeftIcon,
50
52
  ChevronRightIcon,
51
53
  ClipboardIcon,
54
+ Cross1Icon,
52
55
  DotsHorizontalIcon,
53
56
  DotsVerticalIcon,
54
57
  ExclamationTriangleIcon,
@@ -57,6 +60,7 @@ var import_react_icons = require("@radix-ui/react-icons");
57
60
  InfoCircledIcon,
58
61
  MagnifyingGlassIcon,
59
62
  MixerHorizontalIcon,
63
+ Pencil1Icon,
60
64
  PersonIcon,
61
65
  PlusIcon
62
66
  });
package/dist/icon.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/icon.ts"],"sourcesContent":["export {\n BookmarkIcon,\n ExitIcon,\n InfoCircledIcon,\n ExclamationTriangleIcon,\n MagnifyingGlassIcon,\n DotsHorizontalIcon,\n ChatBubbleIcon,\n PlusIcon,\n BookmarkFilledIcon,\n MixerHorizontalIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ClipboardIcon,\n BarChartIcon,\n PersonIcon,\n GearIcon,\n DotsVerticalIcon,\n} from '@radix-ui/react-icons';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAkBO;","names":[]}
1
+ {"version":3,"sources":["../src/icon.ts"],"sourcesContent":["export {\n BookmarkIcon,\n ExitIcon,\n InfoCircledIcon,\n ExclamationTriangleIcon,\n MagnifyingGlassIcon,\n DotsHorizontalIcon,\n ChatBubbleIcon,\n PlusIcon,\n BookmarkFilledIcon,\n MixerHorizontalIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ClipboardIcon,\n BarChartIcon,\n PersonIcon,\n GearIcon,\n DotsVerticalIcon,\n Pencil1Icon,\n Cross1Icon\n} from '@radix-ui/react-icons';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAoBO;","names":[]}
package/dist/icon.d.cts CHANGED
@@ -1,3 +1,3 @@
1
- export { BarChartIcon, BookmarkFilledIcon, BookmarkIcon, ChatBubbleIcon, ChevronLeftIcon, ChevronRightIcon, ClipboardIcon, DotsHorizontalIcon, DotsVerticalIcon, ExclamationTriangleIcon, ExitIcon, GearIcon, InfoCircledIcon, MagnifyingGlassIcon, MixerHorizontalIcon, PersonIcon, PlusIcon } from '@radix-ui/react-icons';
1
+ export { BarChartIcon, BookmarkFilledIcon, BookmarkIcon, ChatBubbleIcon, ChevronLeftIcon, ChevronRightIcon, ClipboardIcon, Cross1Icon, DotsHorizontalIcon, DotsVerticalIcon, ExclamationTriangleIcon, ExitIcon, GearIcon, InfoCircledIcon, MagnifyingGlassIcon, MixerHorizontalIcon, Pencil1Icon, PersonIcon, PlusIcon } from '@radix-ui/react-icons';
2
2
  import '@radix-ui/themes';
3
3
  import '@radix-ui/themes/dist/cjs/props/index.js';
package/dist/icon.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- export { BarChartIcon, BookmarkFilledIcon, BookmarkIcon, ChatBubbleIcon, ChevronLeftIcon, ChevronRightIcon, ClipboardIcon, DotsHorizontalIcon, DotsVerticalIcon, ExclamationTriangleIcon, ExitIcon, GearIcon, InfoCircledIcon, MagnifyingGlassIcon, MixerHorizontalIcon, PersonIcon, PlusIcon } from '@radix-ui/react-icons';
1
+ export { BarChartIcon, BookmarkFilledIcon, BookmarkIcon, ChatBubbleIcon, ChevronLeftIcon, ChevronRightIcon, ClipboardIcon, Cross1Icon, DotsHorizontalIcon, DotsVerticalIcon, ExclamationTriangleIcon, ExitIcon, GearIcon, InfoCircledIcon, MagnifyingGlassIcon, MixerHorizontalIcon, Pencil1Icon, PersonIcon, PlusIcon } from '@radix-ui/react-icons';
2
2
  import '@radix-ui/themes';
3
3
  import '@radix-ui/themes/dist/cjs/props/index.js';
package/dist/icon.js CHANGED
@@ -6,6 +6,7 @@ import {
6
6
  ChevronLeftIcon,
7
7
  ChevronRightIcon,
8
8
  ClipboardIcon,
9
+ Cross1Icon,
9
10
  DotsHorizontalIcon,
10
11
  DotsVerticalIcon,
11
12
  ExclamationTriangleIcon,
@@ -14,9 +15,10 @@ import {
14
15
  InfoCircledIcon,
15
16
  MagnifyingGlassIcon,
16
17
  MixerHorizontalIcon,
18
+ Pencil1Icon,
17
19
  PersonIcon,
18
20
  PlusIcon
19
- } from "./chunk-M474I6JB.js";
21
+ } from "./chunk-HUBPQ7ZR.js";
20
22
  import "./chunk-N552FDTV.js";
21
23
  export {
22
24
  BarChartIcon,
@@ -26,6 +28,7 @@ export {
26
28
  ChevronLeftIcon,
27
29
  ChevronRightIcon,
28
30
  ClipboardIcon,
31
+ Cross1Icon,
29
32
  DotsHorizontalIcon,
30
33
  DotsVerticalIcon,
31
34
  ExclamationTriangleIcon,
@@ -34,6 +37,7 @@ export {
34
37
  InfoCircledIcon,
35
38
  MagnifyingGlassIcon,
36
39
  MixerHorizontalIcon,
40
+ Pencil1Icon,
37
41
  PersonIcon,
38
42
  PlusIcon
39
43
  };