@tipp/ui 1.5.4 → 1.5.6

package/dist/chunk-ZC6UF5SE.js

@@ -0,0 +1,89 @@
+import {
+  DataList
+} from "./chunk-VTJZMOSP.js";
+import {
+  toast
+} from "./chunk-CYYWMYE7.js";
+import {
+  Button
+} from "./chunk-U7JPP7WJ.js";
+
+// src/app/platform/userInfos/utils.tsx
+import { format } from "date-fns";
+import { CopyIcon } from "@radix-ui/react-icons";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var infoList = [
+  { label: "\uC774\uB984", getValue: (customer) => customer == null ? void 0 : customer.username },
+  { label: "\uC131\uBCC4", getValue: (customer) => customer == null ? void 0 : customer.gender },
+  {
+    label: "\uC0DD\uB144\uC6D4\uC77C",
+    getValue: (customer) => (customer == null ? void 0 : customer.birthdate) && format(customer.birthdate, "yyyy.MM.dd")
+  },
+  { label: "\uBD80\uC11C", getValue: (customer) => customer == null ? void 0 : customer.team },
+  { label: "\uC9C1\uCC45", getValue: (customer) => customer == null ? void 0 : customer.position },
+  { label: "\uC9C1\uAE09", getValue: (customer) => customer == null ? void 0 : customer.level },
+  { label: "\uC774\uBA54\uC77C", getValue: (customer) => customer == null ? void 0 : customer.email, copyable: true },
+  {
+    label: "\uC804\uD654\uBC88\uD638",
+    getValue: (customer) => customer == null ? void 0 : customer.phone,
+    render: (value) => {
+      return value == null ? void 0 : value.replace(/[^0-9]/g, "").replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
+    },
+    copyable: true
+  }
+];
+var sessionList = [
+  {
+    label: "\uC9C4\uD589\uC911\uC778 \uC138\uC158",
+    getValue: (session) => `${(session == null ? void 0 : session.restSession) || "-"}\uD68C\uCC28/${(session == null ? void 0 : session.totalSession) || "-"}\uD68C\uCC28`
+  },
+  {
+    label: "\uB2E4\uC74C \uC138\uC158 \uC77C\uC2DC",
+    getValue: (session) => (session == null ? void 0 : session.nextSessionDate) ? format(session.nextSessionDate, "yyyy\uB144 MM\uC6D4 dd\uC77C HH\uC2DC mm\uBD84") : "-"
+  },
+  {
+    label: "\uB2E4\uC74C \uC138\uC158 \uCC38\uC5EC \uBC29\uC2DD",
+    getValue: (session) => (session == null ? void 0 : session.nextSessionType) || "-"
+  },
+  {
+    label: "\uCF54\uCE6D \uB9CC\uB8CC \uAE30\uD55C",
+    getValue: (session) => (session == null ? void 0 : session.expiredAt) ? format(session.expiredAt, "yyyy\uB144 MM\uC6D4 dd\uC77C") : "-"
+  }
+];
+var renderItem = (info, data) => {
+  const value = info.getValue(data);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    info.render ? info.render(value) : value || "-",
+    info.copyable && value ? /* @__PURE__ */ jsx(CopyButton, { value }) : null
+  ] });
+};
+var renderDataListItem = (info, data) => {
+  return /* @__PURE__ */ jsxs(DataList.Item, { children: [
+    /* @__PURE__ */ jsx(DataList.Label, { children: info.label }),
+    /* @__PURE__ */ jsx(DataList.Value, { children: renderItem(info, data) })
+  ] }, info.label);
+};
+function CopyButton(props) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      color: "gray",
+      onClick: () => {
+        void navigator.clipboard.writeText(props.value);
+        toast.success("\uBCF5\uC0AC\uB418\uC5C8\uC2B5\uB2C8\uB2E4.");
+      },
+      style: { marginLeft: "0", marginTop: "0" },
+      variant: "transparent",
+      children: /* @__PURE__ */ jsx(CopyIcon, {})
+    }
+  );
+}
+
+export {
+  infoList,
+  sessionList,
+  renderItem,
+  renderDataListItem,
+  CopyButton
+};
+//# sourceMappingURL=chunk-ZC6UF5SE.js.map

package/dist/chunk-ZC6UF5SE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/app/platform/userInfos/utils.tsx"],"sourcesContent":["import type { ProjectStatus } from '@tipp/biz-utils';\nimport { format } from 'date-fns';\nimport { CopyIcon } from '@radix-ui/react-icons';\nimport { Button, DataList, toast } from '../../../atoms';\n\nexport interface CoachingCustomerInfoProps {\n  customer?: Customer;\n  session?: Session;\n  children?: React.ReactElement;\n}\n\nexport interface Customer {\n  username?: string;\n  email?: string;\n  gender?: string;\n  birthdate?: Date;\n  phone?: string;\n  company?: string;\n  team?: string;\n  position?: string;\n  level: string;\n}\n\nexport interface Session {\n  state: ProjectStatus;\n  totalSession: number;\n  restSession: number;\n  nextSessionDate?: Date;\n  nextSessionType?: string;\n  expiredAt: Date;\n}\n\nexport interface DataListItems<T> {\n  label: string;\n  getValue: (original?: T) => string | undefined;\n  copyable?: boolean;\n  render?: (value?: string) => React.ReactNode;\n}\n\nexport const infoList: DataListItems<Customer>[] = [\n  { label: '이름', getValue: (customer) => customer?.username },\n  { label: '성별', getValue: (customer) => customer?.gender },\n  {\n    label: '생년월일',\n    getValue: (customer) =>\n      customer?.birthdate && format(customer.birthdate, 'yyyy.MM.dd'),\n  },\n  { label: '부서', getValue: (customer) => customer?.team },\n  { label: '직책', getValue: (customer) => customer?.position },\n  { label: '직급', getValue: (customer) => customer?.level },\n  { label: '이메일', getValue: (customer) => customer?.email, copyable: true },\n  {\n    label: '전화번호',\n    getValue: (customer) => customer?.phone,\n    render: (value) => {\n      // 핸드폰 전화번호 형식으로 변환\n      return (\n        value\n          ?.replace(/[^0-9]/g, '')\n          // eslint-disable-next-line prefer-named-capture-group -- target es 변경하기 전이라서 이대로 둠\n          .replace(/^(\\d{2,3})(\\d{3,4})(\\d{4})$/, `$1-$2-$3`)\n      );\n    },\n    copyable: true,\n  },\n];\n\nexport const sessionList: DataListItems<Session>[] = [\n  {\n    label: '진행중인 세션',\n    getValue: (session) =>\n      `${session?.restSession || '-'}회차/${session?.totalSession || '-'}회차`,\n  },\n  {\n    label: '다음 세션 일시',\n    getValue: (session) =>\n      session?.nextSessionDate\n        ? format(session.nextSessionDate, 'yyyy년 MM월 dd일 HH시 mm분')\n        : '-',\n  },\n  {\n    label: '다음 세션 참여 방식',\n    getValue: (session) => session?.nextSessionType || '-',\n  },\n  {\n    label: '코칭 만료 기한',\n    getValue: (session) =>\n      session?.expiredAt ? format(session.expiredAt, 'yyyy년 MM월 dd일') : '-',\n  },\n];\n\nexport const renderItem = <T extends object>(\n  info: DataListItems<T>,\n  data?: T\n): JSX.Element => {\n  const value = info.getValue(data);\n  return (\n    <>\n      {info.render ? info.render(value) : value || '-'}\n      {info.copyable && value ? <CopyButton value={value} /> : null}\n    </>\n  );\n};\n\nexport const renderDataListItem = <T extends object>(\n  info: DataListItems<T>,\n  data?: T\n): React.ReactElement => {\n  return (\n    <DataList.Item key={info.label}>\n      <DataList.Label>{info.label}</DataList.Label>\n      <DataList.Value>{renderItem(info, data)}</DataList.Value>\n    </DataList.Item>\n  );\n};\n\nexport function CopyButton(props: { value: string }): JSX.Element {\n  return (\n    <Button\n      color=\"gray\"\n      onClick={() => {\n        void navigator.clipboard.writeText(props.value);\n        toast.success('복사되었습니다.');\n      }}\n      style={{ marginLeft: '0', marginTop: '0' }}\n      variant=\"transparent\"\n    >\n      <CopyIcon />\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;;;;;AACA,SAAS,cAAc;AACvB,SAAS,gBAAgB;AA+FrB,mBAE4B,KAF5B;AA1DG,IAAM,WAAsC;AAAA,EACjD,EAAE,OAAO,gBAAM,UAAU,CAAC,aAAa,qCAAU,SAAS;AAAA,EAC1D,EAAE,OAAO,gBAAM,UAAU,CAAC,aAAa,qCAAU,OAAO;AAAA,EACxD;AAAA,IACE,OAAO;AAAA,IACP,UAAU,CAAC,cACT,qCAAU,cAAa,OAAO,SAAS,WAAW,YAAY;AAAA,EAClE;AAAA,EACA,EAAE,OAAO,gBAAM,UAAU,CAAC,aAAa,qCAAU,KAAK;AAAA,EACtD,EAAE,OAAO,gBAAM,UAAU,CAAC,aAAa,qCAAU,SAAS;AAAA,EAC1D,EAAE,OAAO,gBAAM,UAAU,CAAC,aAAa,qCAAU,MAAM;AAAA,EACvD,EAAE,OAAO,sBAAO,UAAU,CAAC,aAAa,qCAAU,OAAO,UAAU,KAAK;AAAA,EACxE;AAAA,IACE,OAAO;AAAA,IACP,UAAU,CAAC,aAAa,qCAAU;AAAA,IAClC,QAAQ,CAAC,UAAU;AAEjB,aACE,+BACI,QAAQ,WAAW,IAEpB,QAAQ,+BAA+B;AAAA,IAE9C;AAAA,IACA,UAAU;AAAA,EACZ;AACF;AAEO,IAAM,cAAwC;AAAA,EACnD;AAAA,IACE,OAAO;AAAA,IACP,UAAU,CAAC,YACT,IAAG,mCAAS,gBAAe,GAAG,iBAAM,mCAAS,iBAAgB,GAAG;AAAA,EACpE;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,UAAU,CAAC,aACT,mCAAS,mBACL,OAAO,QAAQ,iBAAiB,gDAAuB,IACvD;AAAA,EACR;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,UAAU,CAAC,aAAY,mCAAS,oBAAmB;AAAA,EACrD;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,UAAU,CAAC,aACT,mCAAS,aAAY,OAAO,QAAQ,WAAW,8BAAe,IAAI;AAAA,EACtE;AACF;AAEO,IAAM,aAAa,CACxB,MACA,SACgB;AAChB,QAAM,QAAQ,KAAK,SAAS,IAAI;AAChC,SACE,iCACG;AAAA,SAAK,SAAS,KAAK,OAAO,KAAK,IAAI,SAAS;AAAA,IAC5C,KAAK,YAAY,QAAQ,oBAAC,cAAW,OAAc,IAAK;AAAA,KAC3D;AAEJ;AAEO,IAAM,qBAAqB,CAChC,MACA,SACuB;AACvB,SACE,qBAAC,SAAS,MAAT,EACC;AAAA,wBAAC,SAAS,OAAT,EAAgB,eAAK,OAAM;AAAA,IAC5B,oBAAC,SAAS,OAAT,EAAgB,qBAAW,MAAM,IAAI,GAAE;AAAA,OAFtB,KAAK,KAGzB;AAEJ;AAEO,SAAS,WAAW,OAAuC;AAChE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,SAAS,MAAM;AACb,aAAK,UAAU,UAAU,UAAU,MAAM,KAAK;AAC9C,cAAM,QAAQ,6CAAU;AAAA,MAC1B;AAAA,MACA,OAAO,EAAE,YAAY,KAAK,WAAW,IAAI;AAAA,MACzC,SAAQ;AAAA,MAER,8BAAC,YAAS;AAAA;AAAA,EACZ;AAEJ;","names":[]}

package/dist/chunk-ZD54B67F.js

@@ -0,0 +1,243 @@
+import {
+  OnOfflineRadioCard
+} from "./chunk-5V7PQQCS.js";
+import {
+  DatePickerButton
+} from "./chunk-SPD533EN.js";
+import {
+  TimeSelect
+} from "./chunk-K55LGP5B.js";
+import {
+  getTimeOption,
+  parseTimeOption
+} from "./chunk-VAXB7NV2.js";
+import {
+  Form
+} from "./chunk-SRZ6X74X.js";
+import {
+  Inset
+} from "./chunk-XQOL7UBI.js";
+import {
+  Grid
+} from "./chunk-EGEQY3KT.js";
+import {
+  Heading
+} from "./chunk-HK224ADT.js";
+import {
+  Box
+} from "./chunk-4Y5BEXVN.js";
+import {
+  BulletText
+} from "./chunk-NAL2USH5.js";
+import {
+  Typo
+} from "./chunk-52MVZ6AN.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Button
+} from "./chunk-U7JPP7WJ.js";
+import {
+  Card
+} from "./chunk-2ZQK7NTN.js";
+import {
+  Badge
+} from "./chunk-EWD4AO5N.js";
+import {
+  ArrowRightIcon,
+  Cross1Icon
+} from "./chunk-UAN5JXP3.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-N552FDTV.js";
+
+// src/app/platform/reservation-card.tsx
+import { useCallback, useMemo, useState } from "react";
+import { setHours, setMinutes } from "date-fns";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ReservationCard(props) {
+  const {
+    sessionNumber,
+    customerName,
+    readonly,
+    defaultTime,
+    defaultType,
+    error,
+    onClickReserve,
+    onClickCancel,
+    onClickCompleteSession
+  } = props;
+  const [editValues, setEditValues] = useState({
+    date: props.defaultTime,
+    type: props.defaultType
+  });
+  const date = readonly ? defaultTime : editValues.date;
+  const type = readonly ? defaultType : editValues.type;
+  const time = date && getTimeOption(date);
+  const onClickSave = useCallback(() => {
+    var _a;
+    (_a = props.onClickSave) == null ? void 0 : _a.call(props, editValues);
+  }, [editValues, props]);
+  const onClickReset = useCallback(() => {
+    setEditValues({
+      date: defaultTime,
+      type: defaultType
+    });
+  }, [defaultTime, defaultType]);
+  const ActionButtons = useMemo(() => {
+    if (readonly) {
+      return /* @__PURE__ */ jsx(Button, { onClick: onClickReserve, size: "small", variant: "surface", children: "\uC608\uC57D\uD558\uAE30" });
+    }
+    return /* @__PURE__ */ jsx(Button, { color: "gray", onClick: onClickCancel, variant: "transparent", children: /* @__PURE__ */ jsx(Cross1Icon, {}) });
+  }, [onClickCancel, onClickReserve, readonly]);
+  const onChangeDate = useCallback(
+    (newDate) => {
+      if (!newDate)
+        return;
+      const { hour = 0, minute = 0 } = time ? parseTimeOption(time) : {};
+      setEditValues((prev) => {
+        return __spreadProps(__spreadValues({}, prev), {
+          date: setMinutes(setHours(newDate, hour), minute)
+        });
+      });
+    },
+    [time]
+  );
+  const onChangeType = useCallback((newType) => {
+    setEditValues((prev) => {
+      return __spreadProps(__spreadValues({}, prev), {
+        type: newType
+      });
+    });
+  }, []);
+  const onChangeTime = useCallback(
+    (v) => {
+      const { hour, minute } = parseTimeOption(v);
+      setEditValues((prev) => {
+        return __spreadProps(__spreadValues({}, prev), {
+          date: setMinutes(setHours(date || /* @__PURE__ */ new Date(), hour), minute)
+        });
+      });
+    },
+    [date]
+  );
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      error: Boolean(error),
+      size: "3",
+      style: { overflow: "visible", contain: "initial" },
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", justify: "between", mb: "5", children: [
+          /* @__PURE__ */ jsxs(
+            Grid,
+            {
+              align: "center",
+              columns: { initial: "1", xs: "auto 1fr" },
+              gapY: "2",
+              children: [
+                /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
+                  /* @__PURE__ */ jsxs(Heading, { variant: "heading4", children: [
+                    customerName || "-",
+                    "\uB2D8 ",
+                    sessionNumber || "-",
+                    "\uD68C\uCC28 \uC138\uC158"
+                  ] }),
+                  /* @__PURE__ */ jsx(Badge, { ml: "2", children: "\uB2E4\uC74C \uC138\uC158" })
+                ] }),
+                error ? /* @__PURE__ */ jsx(BulletText, { color: "red", variant: "caption", children: error }) : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Flex, { children: ActionButtons })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+          Form.Root,
+          {
+            onSubmit: (e) => {
+              e.preventDefault();
+            },
+            children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "5", children: [
+              /* @__PURE__ */ jsx(Form.Field, { name: "date", children: /* @__PURE__ */ jsxs(Form.Label, { asChild: true, children: [
+                /* @__PURE__ */ jsx(Heading, { mb: "2", variant: "heading5", weight: "regular", children: "\uC138\uC158 \uC77C\uC790\uC640 \uC2DC\uAC01" }),
+                /* @__PURE__ */ jsxs(Grid, { columns: "1fr auto", gap: "4", children: [
+                  /* @__PURE__ */ jsx(
+                    DatePickerButton,
+                    {
+                      disabled: readonly,
+                      onChange: onChangeDate,
+                      placeholder: "\uC77C\uC790\uB97C \uC120\uD0DD\uD574\uC8FC\uC138\uC694",
+                      selected: date,
+                      size: "large"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    TimeSelect,
+                    {
+                      disabled: readonly,
+                      onValueChange: onChangeTime,
+                      size: "3",
+                      value: time
+                    }
+                  )
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsxs(Form.Field, { name: "type", children: [
+                /* @__PURE__ */ jsx(Form.Label, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { mb: "2", variant: "heading5", weight: "regular", children: "\uC628/\uC624\uD504\uB77C\uC778 \uC9C4\uD589 \uC5EC\uBD80" }) }),
+                /* @__PURE__ */ jsx(Form.Control, { asChild: true, children: /* @__PURE__ */ jsx(
+                  OnOfflineRadioCard,
+                  {
+                    disabled: readonly,
+                    onValueChange: onChangeType,
+                    size: "1",
+                    value: type
+                  }
+                ) })
+              ] }),
+              readonly ? null : /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", justify: "end", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    color: "gray",
+                    onClick: onClickReset,
+                    size: "small",
+                    variant: "transparent",
+                    children: "\uCD08\uAE30\uD654\uD558\uAE30"
+                  }
+                ),
+                /* @__PURE__ */ jsx(Button, { onClick: onClickSave, size: "small", children: "\uC800\uC7A5\uD558\uAE30" })
+              ] })
+            ] })
+          }
+        ) }),
+        readonly ? /* @__PURE__ */ jsx(Inset, { clip: "border-box", side: "bottom", children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            mt: "5",
+            px: "5",
+            py: "4",
+            style: { backgroundColor: "var(--accent-a3)" },
+            width: "100%",
+            children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "4", justify: "center", children: [
+              /* @__PURE__ */ jsxs(Typo, { children: [
+                sessionNumber || "-",
+                "\uD68C\uCC28 \uC138\uC158\uC744 \uC644\uB8CC\uD558\uC168\uB098\uC694?"
+              ] }),
+              /* @__PURE__ */ jsxs(Button, { onClick: onClickCompleteSession, size: "small", children: [
+                "\uC138\uC158 \uC885\uB8CC\uD558\uAE30",
+                /* @__PURE__ */ jsx(ArrowRightIcon, {})
+              ] })
+            ] })
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+
+export {
+  ReservationCard
+};
+//# sourceMappingURL=chunk-ZD54B67F.js.map

package/dist/chunk-ZD54B67F.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/app/platform/reservation-card.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from 'react';\nimport { setHours, setMinutes } from 'date-fns';\nimport {\n  Badge,\n  Box,\n  BulletText,\n  Button,\n  Card,\n  Flex,\n  Form,\n  Grid,\n  Heading,\n  Inset,\n  Typo,\n} from '../../atoms';\nimport { ArrowRightIcon, Cross1Icon } from '../../icon';\nimport { DatePickerButton, TimeSelect } from '../../molecules';\nimport { getTimeOption, parseTimeOption } from '../../utils';\nimport { OnOfflineRadioCard } from './on-offline-radio-card';\n\ntype Type = 'onlineCoaching' | 'offlineCoaching';\n\ninterface Values {\n  date?: Date;\n  type?: Type;\n}\n\nexport interface ReservationCardProps {\n  sessionNumber?: number;\n  readonly?: boolean;\n  defaultTime?: Date;\n  defaultType?: Type;\n  customerName?: string;\n  error?: string;\n  onClickCompleteSession?: () => void;\n  onClickReserve?: () => void;\n  onClickSave?: (values: Values) => void;\n  onClickCancel?: () => void;\n}\n\nexport function ReservationCard(\n  props: ReservationCardProps\n): React.ReactElement {\n  const {\n    sessionNumber,\n    customerName,\n    readonly,\n    defaultTime,\n    defaultType,\n    error,\n    onClickReserve,\n    onClickCancel,\n    onClickCompleteSession,\n  } = props;\n\n  const [editValues, setEditValues] = useState<Values>({\n    date: props.defaultTime,\n    type: props.defaultType,\n  });\n\n  const date = readonly ? defaultTime : editValues.date;\n  const type = readonly ? defaultType : editValues.type;\n  const time = date && getTimeOption(date);\n\n  const onClickSave = useCallback(() => {\n    props.onClickSave?.(editValues);\n  }, [editValues, props]);\n\n  const onClickReset = useCallback(() => {\n    setEditValues({\n      date: defaultTime,\n      type: defaultType,\n    });\n  }, [defaultTime, defaultType]);\n\n  const ActionButtons = useMemo(() => {\n    if (readonly) {\n      return (\n        <Button onClick={onClickReserve} size=\"small\" variant=\"surface\">\n          예약하기\n        </Button>\n      );\n    }\n    return (\n      <Button color=\"gray\" onClick={onClickCancel} variant=\"transparent\">\n        <Cross1Icon />\n      </Button>\n    );\n  }, [onClickCancel, onClickReserve, readonly]);\n\n  const onChangeDate = useCallback(\n    (newDate: Date | null) => {\n      if (!newDate) return;\n      const { hour = 0, minute = 0 } = time ? parseTimeOption(time) : {};\n      setEditValues((prev) => {\n        return {\n          ...prev,\n          date: setMinutes(setHours(newDate, hour), minute),\n        };\n      });\n    },\n    [time]\n  );\n\n  const onChangeType = useCallback((newType: string) => {\n    setEditValues((prev) => {\n      return {\n        ...prev,\n        type: newType as Type,\n      };\n    });\n  }, []);\n\n  const onChangeTime = useCallback(\n    (v: string) => {\n      const { hour, minute } = parseTimeOption(v);\n      setEditValues((prev) => {\n        return {\n          ...prev,\n          date: setMinutes(setHours(date || new Date(), hour), minute),\n        };\n      });\n    },\n    [date]\n  );\n\n  return (\n    <Card\n      error={Boolean(error)}\n      size=\"3\"\n      style={{ overflow: 'visible', contain: 'initial' }}\n    >\n      <Flex align=\"center\" gap=\"3\" justify=\"between\" mb=\"5\">\n        <Grid\n          align=\"center\"\n          columns={{ initial: '1', xs: 'auto 1fr' }}\n          gapY=\"2\"\n        >\n          <Flex align=\"center\">\n            <Heading variant=\"heading4\">\n              {customerName || '-'}님 {sessionNumber || '-'}회차 세션\n            </Heading>\n            <Badge ml=\"2\">다음 세션</Badge>\n          </Flex>\n          {error ? (\n            <BulletText color=\"red\" variant=\"caption\">\n              {error}\n            </BulletText>\n          ) : null}\n        </Grid>\n        <Flex>{ActionButtons}</Flex>\n      </Flex>\n\n      <Box>\n        <Form.Root\n          onSubmit={(e) => {\n            e.preventDefault();\n          }}\n        >\n          <Flex direction=\"column\" gap=\"5\">\n            <Form.Field name=\"date\">\n              <Form.Label asChild>\n                <Heading mb=\"2\" variant=\"heading5\" weight=\"regular\">\n                  세션 일자와 시각\n                </Heading>\n                <Grid columns=\"1fr auto\" gap=\"4\">\n                  <DatePickerButton\n                    disabled={readonly}\n                    onChange={onChangeDate}\n                    placeholder=\"일자를 선택해주세요\"\n                    selected={date}\n                    size=\"large\"\n                  />\n                  <TimeSelect\n                    disabled={readonly}\n                    onValueChange={onChangeTime}\n                    size=\"3\"\n                    value={time}\n                  />\n                </Grid>\n              </Form.Label>\n            </Form.Field>\n\n            <Form.Field name=\"type\">\n              <Form.Label asChild>\n                <Heading mb=\"2\" variant=\"heading5\" weight=\"regular\">\n                  온/오프라인 진행 여부\n                </Heading>\n              </Form.Label>\n              <Form.Control asChild>\n                <OnOfflineRadioCard\n                  disabled={readonly}\n                  onValueChange={onChangeType}\n                  size=\"1\"\n                  value={type}\n                />\n              </Form.Control>\n            </Form.Field>\n\n            {readonly ? null : (\n              <Flex align=\"center\" gap=\"3\" justify=\"end\">\n                <Button\n                  color=\"gray\"\n                  onClick={onClickReset}\n                  size=\"small\"\n                  variant=\"transparent\"\n                >\n                  초기화하기\n                </Button>\n                <Button onClick={onClickSave} size=\"small\">\n                  저장하기\n                </Button>\n              </Flex>\n            )}\n          </Flex>\n        </Form.Root>\n      </Box>\n\n      {readonly ? (\n        <Inset clip=\"border-box\" side=\"bottom\">\n          <Box\n            mt=\"5\"\n            px=\"5\"\n            py=\"4\"\n            style={{ backgroundColor: 'var(--accent-a3)' }}\n            width=\"100%\"\n          >\n            <Flex align=\"center\" gap=\"4\" justify=\"center\">\n              <Typo>{sessionNumber || '-'}회차 세션을 완료하셨나요?</Typo>\n              <Button onClick={onClickCompleteSession} size=\"small\">\n                세션 종료하기\n                <ArrowRightIcon />\n              </Button>\n            </Flex>\n          </Box>\n        </Inset>\n      ) : null}\n    </Card>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,aAAa,SAAS,gBAAgB;AACtD,SAAS,UAAU,kBAAkB;AA6E7B,cA6DI,YA7DJ;AAtCD,SAAS,gBACd,OACoB;AACpB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,CAAC,YAAY,aAAa,IAAI,SAAiB;AAAA,IACnD,MAAM,MAAM;AAAA,IACZ,MAAM,MAAM;AAAA,EACd,CAAC;AAED,QAAM,OAAO,WAAW,cAAc,WAAW;AACjD,QAAM,OAAO,WAAW,cAAc,WAAW;AACjD,QAAM,OAAO,QAAQ,cAAc,IAAI;AAEvC,QAAM,cAAc,YAAY,MAAM;AAhExC;AAiEI,gBAAM,gBAAN,+BAAoB;AAAA,EACtB,GAAG,CAAC,YAAY,KAAK,CAAC;AAEtB,QAAM,eAAe,YAAY,MAAM;AACrC,kBAAc;AAAA,MACZ,MAAM;AAAA,MACN,MAAM;AAAA,IACR,CAAC;AAAA,EACH,GAAG,CAAC,aAAa,WAAW,CAAC;AAE7B,QAAM,gBAAgB,QAAQ,MAAM;AAClC,QAAI,UAAU;AACZ,aACE,oBAAC,UAAO,SAAS,gBAAgB,MAAK,SAAQ,SAAQ,WAAU,sCAEhE;AAAA,IAEJ;AACA,WACE,oBAAC,UAAO,OAAM,QAAO,SAAS,eAAe,SAAQ,eACnD,8BAAC,cAAW,GACd;AAAA,EAEJ,GAAG,CAAC,eAAe,gBAAgB,QAAQ,CAAC;AAE5C,QAAM,eAAe;AAAA,IACnB,CAAC,YAAyB;AACxB,UAAI,CAAC;AAAS;AACd,YAAM,EAAE,OAAO,GAAG,SAAS,EAAE,IAAI,OAAO,gBAAgB,IAAI,IAAI,CAAC;AACjE,oBAAc,CAAC,SAAS;AACtB,eAAO,iCACF,OADE;AAAA,UAEL,MAAM,WAAW,SAAS,SAAS,IAAI,GAAG,MAAM;AAAA,QAClD;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AAEA,QAAM,eAAe,YAAY,CAAC,YAAoB;AACpD,kBAAc,CAAC,SAAS;AACtB,aAAO,iCACF,OADE;AAAA,QAEL,MAAM;AAAA,MACR;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe;AAAA,IACnB,CAAC,MAAc;AACb,YAAM,EAAE,MAAM,OAAO,IAAI,gBAAgB,CAAC;AAC1C,oBAAc,CAAC,SAAS;AACtB,eAAO,iCACF,OADE;AAAA,UAEL,MAAM,WAAW,SAAS,QAAQ,oBAAI,KAAK,GAAG,IAAI,GAAG,MAAM;AAAA,QAC7D;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,QAAQ,KAAK;AAAA,MACpB,MAAK;AAAA,MACL,OAAO,EAAE,UAAU,WAAW,SAAS,UAAU;AAAA,MAEjD;AAAA,6BAAC,QAAK,OAAM,UAAS,KAAI,KAAI,SAAQ,WAAU,IAAG,KAChD;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,SAAS,EAAE,SAAS,KAAK,IAAI,WAAW;AAAA,cACxC,MAAK;AAAA,cAEL;AAAA,qCAAC,QAAK,OAAM,UACV;AAAA,uCAAC,WAAQ,SAAQ,YACd;AAAA,oCAAgB;AAAA,oBAAI;AAAA,oBAAG,iBAAiB;AAAA,oBAAI;AAAA,qBAC/C;AAAA,kBACA,oBAAC,SAAM,IAAG,KAAI,uCAAK;AAAA,mBACrB;AAAA,gBACC,QACC,oBAAC,cAAW,OAAM,OAAM,SAAQ,WAC7B,iBACH,IACE;AAAA;AAAA;AAAA,UACN;AAAA,UACA,oBAAC,QAAM,yBAAc;AAAA,WACvB;AAAA,QAEA,oBAAC,OACC;AAAA,UAAC,KAAK;AAAA,UAAL;AAAA,YACC,UAAU,CAAC,MAAM;AACf,gBAAE,eAAe;AAAA,YACnB;AAAA,YAEA,+BAAC,QAAK,WAAU,UAAS,KAAI,KAC3B;AAAA,kCAAC,KAAK,OAAL,EAAW,MAAK,QACf,+BAAC,KAAK,OAAL,EAAW,SAAO,MACjB;AAAA,oCAAC,WAAQ,IAAG,KAAI,SAAQ,YAAW,QAAO,WAAU,0DAEpD;AAAA,gBACA,qBAAC,QAAK,SAAQ,YAAW,KAAI,KAC3B;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,UAAU;AAAA,sBACV,UAAU;AAAA,sBACV,aAAY;AAAA,sBACZ,UAAU;AAAA,sBACV,MAAK;AAAA;AAAA,kBACP;AAAA,kBACA;AAAA,oBAAC;AAAA;AAAA,sBACC,UAAU;AAAA,sBACV,eAAe;AAAA,sBACf,MAAK;AAAA,sBACL,OAAO;AAAA;AAAA,kBACT;AAAA,mBACF;AAAA,iBACF,GACF;AAAA,cAEA,qBAAC,KAAK,OAAL,EAAW,MAAK,QACf;AAAA,oCAAC,KAAK,OAAL,EAAW,SAAO,MACjB,8BAAC,WAAQ,IAAG,KAAI,SAAQ,YAAW,QAAO,WAAU,uEAEpD,GACF;AAAA,gBACA,oBAAC,KAAK,SAAL,EAAa,SAAO,MACnB;AAAA,kBAAC;AAAA;AAAA,oBACC,UAAU;AAAA,oBACV,eAAe;AAAA,oBACf,MAAK;AAAA,oBACL,OAAO;AAAA;AAAA,gBACT,GACF;AAAA,iBACF;AAAA,cAEC,WAAW,OACV,qBAAC,QAAK,OAAM,UAAS,KAAI,KAAI,SAAQ,OACnC;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAM;AAAA,oBACN,SAAS;AAAA,oBACT,MAAK;AAAA,oBACL,SAAQ;AAAA,oBACT;AAAA;AAAA,gBAED;AAAA,gBACA,oBAAC,UAAO,SAAS,aAAa,MAAK,SAAQ,sCAE3C;AAAA,iBACF;AAAA,eAEJ;AAAA;AAAA,QACF,GACF;AAAA,QAEC,WACC,oBAAC,SAAM,MAAK,cAAa,MAAK,UAC5B;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,IAAG;AAAA,YACH,OAAO,EAAE,iBAAiB,mBAAmB;AAAA,YAC7C,OAAM;AAAA,YAEN,+BAAC,QAAK,OAAM,UAAS,KAAI,KAAI,SAAQ,UACnC;AAAA,mCAAC,QAAM;AAAA,iCAAiB;AAAA,gBAAI;AAAA,iBAAc;AAAA,cAC1C,qBAAC,UAAO,SAAS,wBAAwB,MAAK,SAAQ;AAAA;AAAA,gBAEpD,oBAAC,kBAAe;AAAA,iBAClB;AAAA,eACF;AAAA;AAAA,QACF,GACF,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/chunk-ZPIMFRCZ.js

@@ -0,0 +1,35 @@
+import {
+  DownloadCard
+} from "./chunk-YQBY5R2B.js";
+import {
+  Heading
+} from "./chunk-HK224ADT.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Card
+} from "./chunk-2ZQK7NTN.js";
+import {
+  __spreadValues
+} from "./chunk-N552FDTV.js";
+
+// src/app/platform/report-card.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ReportCard(props) {
+  const { title, file, status } = props;
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", children: [
+      /* @__PURE__ */ jsx(Heading, { variant: "heading4", children: title }),
+      status
+    ] }),
+    file == null ? void 0 : file.map((el) => {
+      return /* @__PURE__ */ jsx(DownloadCard, __spreadValues({}, el), el.url);
+    })
+  ] });
+}
+
+export {
+  ReportCard
+};
+//# sourceMappingURL=chunk-ZPIMFRCZ.js.map

package/dist/chunk-ZPIMFRCZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/app/platform/report-card.tsx"],"sourcesContent":["import React from 'react';\nimport { Card, Flex, Heading } from '@/atoms';\nimport type { Attachment } from '@/molecules';\nimport { DownloadCard } from '@/molecules';\n\nexport interface ReportCardProps {\n  title?: string;\n  file?: Attachment[];\n  status?: React.ReactElement;\n}\n\nexport function ReportCard(props: ReportCardProps): React.ReactElement {\n  const { title, file, status } = props;\n  return (\n    <Card>\n      <Flex align=\"center\" justify=\"between\">\n        <Heading variant=\"heading4\">{title}</Heading>\n        {status}\n      </Flex>\n      {file?.map((el) => {\n        return <DownloadCard key={el.url} {...el} />;\n      })}\n    </Card>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAeM,SACE,KADF;AAJC,SAAS,WAAW,OAA4C;AACrE,QAAM,EAAE,OAAO,MAAM,OAAO,IAAI;AAChC,SACE,qBAAC,QACC;AAAA,yBAAC,QAAK,OAAM,UAAS,SAAQ,WAC3B;AAAA,0BAAC,WAAQ,SAAQ,YAAY,iBAAM;AAAA,MAClC;AAAA,OACH;AAAA,IACC,6BAAM,IAAI,CAAC,OAAO;AACjB,aAAO,oBAAC,iCAA8B,KAAZ,GAAG,GAAa;AAAA,IAC5C;AAAA,KACF;AAEJ;","names":[]}

package/dist/icon.cjs

@@ -53,6 +53,7 @@ __export(icon_exports, {
   MagnifyingGlassIcon: () => import_react_icons.MagnifyingGlassIcon,
   MixerHorizontalIcon: () => import_react_icons.MixerHorizontalIcon,
   Pencil1Icon: () => import_react_icons.Pencil1Icon,
+  Pencil2Icon: () => import_react_icons.Pencil2Icon,
   PersonIcon: () => import_react_icons.PersonIcon,
   PlusIcon: () => import_react_icons.PlusIcon,
   ReloadIcon: () => import_react_icons.ReloadIcon,
@@ -98,6 +99,7 @@ var import_react_icons = require("@radix-ui/react-icons");
   MagnifyingGlassIcon,
   MixerHorizontalIcon,
   Pencil1Icon,
+  Pencil2Icon,
   PersonIcon,
   PlusIcon,
   ReloadIcon,

package/dist/icon.cjs.map

@@ -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  Pencil1Icon,\n  Cross1Icon,\n  Link2Icon,\n  ChevronUpIcon,\n  ChevronDownIcon,\n  FileIcon,\n  TrashIcon,\n  DoubleArrowLeftIcon,\n  DoubleArrowRightIcon,\n  GlobeIcon,\n  BackpackIcon,\n  CalendarIcon,\n  CheckIcon,\n  ArchiveIcon,\n  RowsIcon,\n  Share1Icon,\n  ClipboardCopyIcon,\n  CheckCircledIcon,\n  ArrowLeftIcon,\n  ReloadIcon,\n  RocketIcon,\n  ArrowRightIcon,\n  CopyIcon,\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAyCO;","names":[]}
+{"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  Link2Icon,\n  ChevronUpIcon,\n  ChevronDownIcon,\n  FileIcon,\n  TrashIcon,\n  DoubleArrowLeftIcon,\n  DoubleArrowRightIcon,\n  GlobeIcon,\n  BackpackIcon,\n  CalendarIcon,\n  CheckIcon,\n  ArchiveIcon,\n  RowsIcon,\n  Share1Icon,\n  ClipboardCopyIcon,\n  CheckCircledIcon,\n  ArrowLeftIcon,\n  ReloadIcon,\n  RocketIcon,\n  ArrowRightIcon,\n  CopyIcon,\n  Pencil2Icon,\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBA0CO;","names":[]}

package/dist/icon.d.cts

@@ -1,3 +1,3 @@
-export { ArchiveIcon, ArrowLeftIcon, ArrowRightIcon, BackpackIcon, BarChartIcon, BookmarkFilledIcon, BookmarkIcon, CalendarIcon, ChatBubbleIcon, CheckCircledIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardCopyIcon, ClipboardIcon, CopyIcon, Cross1Icon, DotsHorizontalIcon, DotsVerticalIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, ExclamationTriangleIcon, ExitIcon, FileIcon, GearIcon, GlobeIcon, InfoCircledIcon, Link2Icon, MagnifyingGlassIcon, MixerHorizontalIcon, Pencil1Icon, PersonIcon, PlusIcon, ReloadIcon, RocketIcon, RowsIcon, Share1Icon, TrashIcon } from '@radix-ui/react-icons';
+export { ArchiveIcon, ArrowLeftIcon, ArrowRightIcon, BackpackIcon, BarChartIcon, BookmarkFilledIcon, BookmarkIcon, CalendarIcon, ChatBubbleIcon, CheckCircledIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardCopyIcon, ClipboardIcon, CopyIcon, Cross1Icon, DotsHorizontalIcon, DotsVerticalIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, ExclamationTriangleIcon, ExitIcon, FileIcon, GearIcon, GlobeIcon, InfoCircledIcon, Link2Icon, MagnifyingGlassIcon, MixerHorizontalIcon, Pencil1Icon, Pencil2Icon, PersonIcon, PlusIcon, ReloadIcon, RocketIcon, RowsIcon, Share1Icon, TrashIcon } from '@radix-ui/react-icons';
 import '@radix-ui/themes';
 import '@radix-ui/themes/dist/cjs/props/index.js';

package/dist/icon.d.ts

@@ -1,3 +1,3 @@
-export { ArchiveIcon, ArrowLeftIcon, ArrowRightIcon, BackpackIcon, BarChartIcon, BookmarkFilledIcon, BookmarkIcon, CalendarIcon, ChatBubbleIcon, CheckCircledIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardCopyIcon, ClipboardIcon, CopyIcon, Cross1Icon, DotsHorizontalIcon, DotsVerticalIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, ExclamationTriangleIcon, ExitIcon, FileIcon, GearIcon, GlobeIcon, InfoCircledIcon, Link2Icon, MagnifyingGlassIcon, MixerHorizontalIcon, Pencil1Icon, PersonIcon, PlusIcon, ReloadIcon, RocketIcon, RowsIcon, Share1Icon, TrashIcon } from '@radix-ui/react-icons';
+export { ArchiveIcon, ArrowLeftIcon, ArrowRightIcon, BackpackIcon, BarChartIcon, BookmarkFilledIcon, BookmarkIcon, CalendarIcon, ChatBubbleIcon, CheckCircledIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardCopyIcon, ClipboardIcon, CopyIcon, Cross1Icon, DotsHorizontalIcon, DotsVerticalIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, ExclamationTriangleIcon, ExitIcon, FileIcon, GearIcon, GlobeIcon, InfoCircledIcon, Link2Icon, MagnifyingGlassIcon, MixerHorizontalIcon, Pencil1Icon, Pencil2Icon, PersonIcon, PlusIcon, ReloadIcon, RocketIcon, RowsIcon, Share1Icon, TrashIcon } from '@radix-ui/react-icons';
 import '@radix-ui/themes';
 import '@radix-ui/themes/dist/cjs/props/index.js';

package/dist/icon.js

@@ -32,6 +32,7 @@ import {
   MagnifyingGlassIcon,
   MixerHorizontalIcon,
   Pencil1Icon,
+  Pencil2Icon,
   PersonIcon,
   PlusIcon,
   ReloadIcon,
@@ -39,7 +40,7 @@ import {
   RowsIcon,
   Share1Icon,
   TrashIcon
-} from "./chunk-UAN5JXP3.js";
+} from "./chunk-SU3E53WX.js";
 import "./chunk-N552FDTV.js";
 export {
   ArchiveIcon,
@@ -75,6 +76,7 @@ export {
   MagnifyingGlassIcon,
   MixerHorizontalIcon,
   Pencil1Icon,
+  Pencil2Icon,
   PersonIcon,
   PlusIcon,
   ReloadIcon,