@dotss/tictoccroc 0.0.0 → 0.0.2

package/dist/teacher/profile/components/EducationSection/EducationSection.mjs

@@ -0,0 +1,152 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { useState as u, Children as p, isValidElement as v } from "react";
+import { Flexbox as n, Typography as f, Tooltip as E, Icon as c, Button as j } from "@dotss/ui";
+import k from "@dotss/ui/core/useTheme";
+import D from "./EducationItem/EducationItem.mjs";
+function B({
+  children: s,
+  hideTooltip: y = !1,
+  action: d,
+  enableToggle: h = !1,
+  ...i
+}) {
+  const { spacing: l } = k(), [g, x] = u(!1), [o, S] = u(!1), m = p.toArray(s).filter(v).filter((t) => t.type === D), C = m.length > 0, b = m.length > 3, a = () => x((t) => !t), I = (t) => {
+    (t.key === "Enter" || t.key === " ") && a();
+  }, w = () => S((t) => !t);
+  return /* @__PURE__ */ r(
+    n,
+    {
+      tag: "section",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      "aria-labelledby": "education-section-title",
+      gap: 2,
+      ...i,
+      inlineCSS: {
+        width: "100%",
+        ...i == null ? void 0 : i.inlineCSS
+      },
+      children: [
+        /* @__PURE__ */ r(n, { alignItems: "center", justifyContent: "center", gap: 1, children: [
+          /* @__PURE__ */ e(
+            f,
+            {
+              id: "education-section-title",
+              tag: "h2",
+              variant: "h2B",
+              "aria-label": "선생님 학력 목록",
+              children: "학력"
+            }
+          ),
+          !y && /* @__PURE__ */ e(
+            E,
+            {
+              open: g,
+              onClose: a,
+              color: "secondary",
+              role: "tooltip",
+              "aria-labelledby": "education-section-tooltip",
+              "aria-describedby": "education-section-tooltip-desc",
+              body: /* @__PURE__ */ r(
+                f,
+                {
+                  id: "education-section-tooltip-desc",
+                  tag: "p",
+                  variant: "b4R",
+                  color: "grey.white",
+                  noWrap: !0,
+                  inlineCSS: {
+                    display: "flex",
+                    gap: l.content(1),
+                    "& svg": {
+                      width: "20px !important",
+                      height: "20px !important",
+                      flexShrink: 0
+                    }
+                  },
+                  children: [
+                    "째깍악어가 확인한 정보는",
+                    /* @__PURE__ */ e(c, { name: "InfoFill", size: "small", color: "tictoccroc-teacher.brand.green" }),
+                    "인증 마크가 붙어요!"
+                  ]
+                }
+              ),
+              inlineCSS: {
+                "&:after": {
+                  transform: `translateX(-${100 + l.content(1)}px)`
+                }
+              },
+              style: {
+                top: -8,
+                left: `calc(50% + 100px - ${l.content(0.5)}px)`
+              },
+              children: /* @__PURE__ */ e(
+                c,
+                {
+                  id: "education-section-tooltip",
+                  role: "button",
+                  tabIndex: 0,
+                  name: "TooltipFill",
+                  size: "small",
+                  color: "grey.50",
+                  onClick: a,
+                  onKeyDown: I,
+                  "aria-label": "추가 정보 안내",
+                  inlineCSS: {
+                    cursor: "pointer"
+                  }
+                }
+              )
+            }
+          )
+        ] }),
+        C && /* @__PURE__ */ e(
+          n,
+          {
+            id: "education-section-education-items",
+            tag: "ul",
+            flexDirection: "column",
+            inlineCSS: { width: "inherit" },
+            children: p.toArray(s).slice(0, o ? void 0 : 3)
+          }
+        ),
+        h && b && /* @__PURE__ */ e(
+          n,
+          {
+            alignItems: "center",
+            justifyContent: "center",
+            mt: 2,
+            inlineCSS: { width: "inherit" },
+            children: /* @__PURE__ */ e(
+              j,
+              {
+                fullWidth: !0,
+                variant: "text",
+                color: "secondary",
+                endAdornment: /* @__PURE__ */ e(c, { name: o ? "ChevronUpLine" : "ChevronDownLine" }),
+                onClick: w,
+                "aria-controls": "education-section-education-items",
+                "aria-expanded": o,
+                children: o ? "접기" : "더 보기"
+              }
+            )
+          }
+        ),
+        !h && d && /* @__PURE__ */ e(
+          n,
+          {
+            mt: 4,
+            flexGrow: 1,
+            alignItems: "center",
+            justifyContent: "center",
+            inlineCSS: { width: "inherit" },
+            children: d
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  B as default
+};

package/dist/teacher/profile/components/EducationSection/index.d.ts

@@ -0,0 +1,4 @@
+import { default as EducationSection, EducationSectionProps } from './EducationSection';
+export type { EducationSectionProps };
+export { default as EducationItem, type EducationItemProps } from './EducationItem';
+export default EducationSection;

package/dist/teacher/profile/components/EducationSection/index.mjs

@@ -0,0 +1,6 @@
+import o from "./EducationSection.mjs";
+import { default as r } from "./EducationItem/EducationItem.mjs";
+export {
+  r as EducationItem,
+  o as default
+};

package/dist/teacher/profile/components/LessonNotesSection/LessonNote/LessonNote.d.ts

@@ -0,0 +1,9 @@
+import { RollerBlockProps } from '../../../../../shared/components/Roller/RollerBlock';
+export interface LessonNoteProps extends RollerBlockProps {
+    content: string;
+    keywords: string[];
+    regDatetime: string;
+    childrenInfo: Record<'childBirth' | 'childGender', string>[];
+}
+declare function LessonNote({ content, keywords, regDatetime, childrenInfo, ...props }: LessonNoteProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default LessonNote;

package/dist/teacher/profile/components/LessonNotesSection/LessonNote/LessonNote.mjs

@@ -0,0 +1,54 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { Typography as l, Flexbox as g, Label as u } from "@dotss/ui";
+import x from "@dotss/ui/core/useTheme";
+import y from "dayjs";
+import C from "../../../../../shared/components/Roller/RollerBlock/RollerBlock.mjs";
+import { getChildLabel as S } from "../LessonNotesSection.utils.mjs";
+function L({ content: h, keywords: t, regDatetime: s, childrenInfo: p, ...n }) {
+  var c, m;
+  const {
+    palette: { grey: f, brand: i }
+  } = x(), { label: o, other: a } = S(p), b = y(s);
+  return /* @__PURE__ */ r(
+    C,
+    {
+      p: 4,
+      flexDirection: "column",
+      gap: 3,
+      ...n,
+      inlineCSS: {
+        minHeight: 220,
+        borderRadius: 12,
+        backgroundColor: f.white,
+        ...n == null ? void 0 : n.inlineCSS
+      },
+      children: [
+        /* @__PURE__ */ e(l, { tag: "p", variant: "b4R", color: "grey.70", lineClamp: 6, inlineCSS: { flexGrow: 1 }, children: h }),
+        t.length > 0 && /* @__PURE__ */ e(g, { alignItems: "center", gap: 1, flexWrap: "wrap", children: t.map((d) => /* @__PURE__ */ e(u, { variant: "ghost", color: "yellow", size: "small", children: d }, `activity-keyword-${d}`)) }),
+        /* @__PURE__ */ r(g, { alignItems: "center", justifyContent: "space-between", gap: 1, children: [
+          /* @__PURE__ */ e(l, { tag: "p", variant: "b4R", color: "grey.70", children: b.format("YYYY-MM-DD") }),
+          /* @__PURE__ */ r(
+            l,
+            {
+              tag: "p",
+              variant: "b4M",
+              color: "grey.70",
+              inlineCSS: {
+                "& > span": {
+                  color: o.includes("여아") ? (c = i.extend) == null ? void 0 : c.pink : (m = i.extend) == null ? void 0 : m.blue
+                }
+              },
+              children: [
+                /* @__PURE__ */ e("span", { children: o }),
+                a ? ` ${a}` : ""
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  L as default
+};

package/dist/teacher/profile/components/LessonNotesSection/LessonNote/index.d.ts

@@ -0,0 +1,3 @@
+import { default as LessonNote, LessonNoteProps } from './LessonNote';
+export type { LessonNoteProps };
+export default LessonNote;

package/dist/teacher/profile/components/LessonNotesSection/LessonNote/index.mjs

@@ -0,0 +1,4 @@
+import e from "./LessonNote.mjs";
+export {
+  e as default
+};

package/dist/teacher/profile/components/LessonNotesSection/LessonNotesSection.d.ts

@@ -0,0 +1,7 @@
+import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
+export interface LessonNotesSectionProps extends FlexboxProps {
+    totalCount: number;
+    onClickViewAll?: () => void;
+}
+declare const LessonNotesSection: import('react').ForwardRefExoticComponent<Omit<LessonNotesSectionProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default LessonNotesSection;

package/dist/teacher/profile/components/LessonNotesSection/LessonNotesSection.mjs

@@ -0,0 +1,8 @@
+import "react/jsx-runtime";
+import "react";
+import "@dotss/ui";
+import "@dotss/ui/core/useTheme";
+import { L as a } from "../../../../LessonNotesSection-a2QNdQtj.js";
+export {
+  a as default
+};

package/dist/teacher/profile/components/LessonNotesSection/LessonNotesSection.utils.d.ts

@@ -0,0 +1,4 @@
+export declare function getChildLabel(children: Record<'childBirth' | 'childGender', string>[]): {
+    label: string;
+    other: string;
+};

package/dist/teacher/profile/components/LessonNotesSection/LessonNotesSection.utils.mjs

@@ -0,0 +1,13 @@
+import c from "../../../../shared/utils/birthDateToAge/birthDateToAge.mjs";
+function b(t) {
+  if (!t || t.length === 0)
+    return { label: "", other: "" };
+  const [e] = t;
+  if (!(e != null && e.childBirth) || !(e != null && e.childGender))
+    return { label: "", other: "" };
+  const o = c(e == null ? void 0 : e.childBirth), n = (e == null ? void 0 : e.childGender) === "0" ? "남아" : "여아", r = `${o}세 ${n}`, a = t.length > 1 ? `외 ${t.length - 1}명` : "";
+  return { label: r, other: a };
+}
+export {
+  b as getChildLabel
+};

package/dist/teacher/profile/components/LessonNotesSection/index.d.ts

@@ -0,0 +1,4 @@
+import { default as LessonNotesSection, LessonNotesSectionProps } from './LessonNotesSection';
+export type { LessonNotesSectionProps };
+export { default as LessonNote, type LessonNoteProps } from './LessonNote';
+export default LessonNotesSection;

package/dist/teacher/profile/components/LessonNotesSection/index.mjs

@@ -0,0 +1,6 @@
+import { L as e } from "../../../../LessonNotesSection-a2QNdQtj.js";
+import { default as a } from "./LessonNote/LessonNote.mjs";
+export {
+  a as LessonNote,
+  e as default
+};

package/dist/teacher/profile/components/ParentReviewSection/ParentReviewCard/ParentReviewCard.d.ts

@@ -0,0 +1,10 @@
+import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
+export interface ParentReviewCardProps extends FlexboxProps {
+    score: number;
+    content: string;
+    careTypeLabel: string;
+    childrenInfo: Record<'childBirth' | 'childGender', string>[];
+    regDatetime: string;
+}
+declare function ParentReviewCard({ score, content, careTypeLabel, childrenInfo, regDatetime, ...props }: ParentReviewCardProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default ParentReviewCard;

package/dist/teacher/profile/components/ParentReviewSection/ParentReviewCard/ParentReviewCard.mjs

@@ -0,0 +1,103 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { useState as f, useRef as z, useEffect as j } from "react";
+import { Flexbox as i, Icon as u, Typography as t, Button as D } from "@dotss/ui";
+import H from "@dotss/ui/core/useTheme";
+import Y from "dayjs";
+import { getChildLabel as k } from "../ParentReviewSection.utils.mjs";
+function B({
+  score: l = 0,
+  content: c,
+  careTypeLabel: v,
+  childrenInfo: x,
+  regDatetime: w,
+  ...b
+}) {
+  var h, g;
+  const {
+    palette: { brand: s }
+  } = H(), [y, C] = f(!1), [a, S] = f(!1), o = z(null), { label: d, other: p } = k(x), I = Y(w), R = () => S((r) => !r);
+  return j(() => {
+    const r = () => {
+      if (!o.current) return;
+      const m = o.current, E = parseInt(window.getComputedStyle(m).lineHeight), L = m.scrollHeight, M = Math.ceil(L / E);
+      C(M > 3);
+    };
+    return r(), window.addEventListener("resize", r), () => {
+      window.removeEventListener("resize", r);
+    };
+  }, [c]), /* @__PURE__ */ n(i, { tag: "li", flexDirection: "column", gap: 3, flexGrow: 1, ...b, children: [
+    /* @__PURE__ */ n(i, { alignItems: "center", gap: 1, children: [
+      /* @__PURE__ */ e(u, { name: "ReviewFill", size: "small", color: "tictoccroc-teacher.brand.yellow" }),
+      /* @__PURE__ */ e(t, { tag: "span", variant: "h4M", "aria-label": `${l}점`, children: l })
+    ] }),
+    /* @__PURE__ */ n(i, { alignItems: "center", justifyContent: "space-between", gap: 1, children: [
+      /* @__PURE__ */ n(i, { flexGrow: 1, gap: 1, alignItems: "center", children: [
+        /* @__PURE__ */ e(t, { tag: "span", variant: "b4M", color: "grey.70", children: v }),
+        /* @__PURE__ */ e(
+          t,
+          {
+            tag: "span",
+            variant: "b5M",
+            color: "grey.70",
+            textAlign: "center",
+            "aria-hidden": !0,
+            inlineCSS: {
+              width: 7,
+              height: 20,
+              lineHeight: "20px"
+            },
+            children: "•"
+          }
+        ),
+        /* @__PURE__ */ n(
+          t,
+          {
+            tag: "p",
+            variant: "b4M",
+            color: "grey.70",
+            inlineCSS: {
+              "& > span": {
+                color: d.includes("여아") ? (h = s.extend) == null ? void 0 : h.pink : (g = s.extend) == null ? void 0 : g.blue
+              }
+            },
+            children: [
+              /* @__PURE__ */ e("span", { children: d }),
+              p ? ` ${p}` : ""
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(t, { tag: "span", variant: "b4R", color: "grey.70", children: I.format("YYYY년 M월 D일") })
+    ] }),
+    /* @__PURE__ */ n(i, { flexDirection: "column", children: [
+      /* @__PURE__ */ e(
+        t,
+        {
+          ref: o,
+          id: "parent-review-content",
+          tag: "p",
+          variant: "b4R",
+          lineClamp: a ? void 0 : 3,
+          children: c
+        }
+      ),
+      y && /* @__PURE__ */ e(
+        D,
+        {
+          variant: "text",
+          size: "xSmall",
+          color: "secondary",
+          endAdornment: /* @__PURE__ */ e(u, { name: a ? "ChevronUpLine" : "ChevronDownLine" }),
+          onClick: R,
+          "aria-expanded": a,
+          "aria-controls": "parent-review-content",
+          inlineCSS: { marginLeft: "auto" },
+          children: a ? "접기" : "더 보기"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  B as default
+};

package/dist/teacher/profile/components/ParentReviewSection/ParentReviewCard/index.d.ts

@@ -0,0 +1,3 @@
+import { default as ParentReviewCard, ParentReviewCardProps } from './ParentReviewCard';
+export { type ParentReviewCardProps };
+export default ParentReviewCard;

package/dist/teacher/profile/components/ParentReviewSection/ParentReviewCard/index.mjs

@@ -0,0 +1,4 @@
+import r from "./ParentReviewCard.mjs";
+export {
+  r as default
+};

package/dist/teacher/profile/components/ParentReviewSection/ParentReviewSection.d.ts

@@ -0,0 +1,7 @@
+import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
+export interface ParentReviewSectionProps extends FlexboxProps {
+    totalCount: number;
+    onClickViewAll?: () => void;
+}
+declare const ParentReviewSection: import('react').ForwardRefExoticComponent<Omit<ParentReviewSectionProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default ParentReviewSection;

package/dist/teacher/profile/components/ParentReviewSection/ParentReviewSection.mjs

@@ -0,0 +1,79 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { Flexbox as i, Typography as l, Button as s, Icon as h } from "@dotss/ui";
+import p from "@dotss/ui/core/useTheme";
+const v = m(
+  ({ children: c, totalCount: o, onClickViewAll: a, ...e }, g) => {
+    const {
+      palette: { grey: d },
+      spacing: r
+    } = p();
+    return /* @__PURE__ */ n(
+      i,
+      {
+        ref: g,
+        tag: "section",
+        pl: 4,
+        pr: 4,
+        gap: 4,
+        flexDirection: "column",
+        "aria-labelledby": "parent-review-section-title",
+        ...e,
+        inlineCSS: {
+          width: "100%",
+          ...e == null ? void 0 : e.inlineCSS
+        },
+        children: [
+          /* @__PURE__ */ n(i, { alignItems: "center", justifyContent: "space-between", gap: 1, children: [
+            /* @__PURE__ */ t(i, { alignItems: "center", gap: 2, children: /* @__PURE__ */ n(l, { id: "parent-review-section-title", tag: "h2", variant: "h2B", children: [
+              "부모님 리뷰",
+              o > 0 && /* @__PURE__ */ n(
+                l,
+                {
+                  tag: "span",
+                  variant: "h4R",
+                  color: "grey.70",
+                  inlineCSS: { marginLeft: r.content(2), verticalAlign: 2 },
+                  children: [
+                    "(",
+                    o.toLocaleString(),
+                    "개)"
+                  ]
+                }
+              )
+            ] }) }),
+            typeof a == "function" && /* @__PURE__ */ t(
+              s,
+              {
+                variant: "text",
+                size: "small",
+                color: "secondary",
+                endAdornment: /* @__PURE__ */ t(h, { name: "ChevronRightLine" }),
+                onClick: a,
+                children: "전체보기"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t(
+            i,
+            {
+              tag: "ul",
+              flexDirection: "column",
+              inlineCSS: {
+                "& > li + li": {
+                  borderTop: `1px solid ${d[10]}`,
+                  marginTop: r.content(5),
+                  paddingTop: r.content(5)
+                }
+              },
+              children: c
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  v as default
+};

package/dist/teacher/profile/components/ParentReviewSection/ParentReviewSection.utils.d.ts

@@ -0,0 +1,4 @@
+export declare function getChildLabel(children: Record<'childBirth' | 'childGender', string>[]): {
+    label: string;
+    other: string;
+};

package/dist/teacher/profile/components/ParentReviewSection/ParentReviewSection.utils.mjs

@@ -0,0 +1,13 @@
+import c from "../../../../shared/utils/birthDateToAge/birthDateToAge.mjs";
+function b(t) {
+  if (!t || t.length === 0)
+    return { label: "", other: "" };
+  const [e] = t;
+  if (!(e != null && e.childBirth) || !(e != null && e.childGender))
+    return { label: "", other: "" };
+  const o = c(e == null ? void 0 : e.childBirth), n = (e == null ? void 0 : e.childGender) === "0" ? "남아" : "여아", r = `${o}세 ${n}`, a = t.length > 1 ? `외 ${t.length - 1}명` : "";
+  return { label: r, other: a };
+}
+export {
+  b as getChildLabel
+};

package/dist/teacher/profile/components/ParentReviewSection/index.d.ts

@@ -0,0 +1,4 @@
+import { default as ParentReviewSection, ParentReviewSectionProps } from './ParentReviewSection';
+export { type ParentReviewSectionProps };
+export { default as ParentReviewCard, type ParentReviewCardProps } from './ParentReviewCard';
+export default ParentReviewSection;

package/dist/teacher/profile/components/ParentReviewSection/index.mjs

@@ -0,0 +1,6 @@
+import r from "./ParentReviewSection.mjs";
+import { default as o } from "./ParentReviewCard/ParentReviewCard.mjs";
+export {
+  o as ParentReviewCard,
+  r as default
+};

package/dist/teacher/profile/components/PreferredActivityKeywordGroup/PreferredActivityKeywordGroup.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
+export interface PreferredActivityKeywordGroupProps extends FlexboxProps {
+    keywords: string[];
+    title?: string;
+    action?: ReactNode;
+}
+declare function PreferredActivityKeywordGroup({ keywords, title, action, ...props }: PreferredActivityKeywordGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default PreferredActivityKeywordGroup;

package/dist/teacher/profile/components/PreferredActivityKeywordGroup/PreferredActivityKeywordGroup.mjs

@@ -0,0 +1,37 @@
+import { jsxs as d, jsx as i } from "react/jsx-runtime";
+import { Flexbox as t, Typography as c, Label as g } from "@dotss/ui";
+function f({
+  keywords: r,
+  title: a = "자신 있는 활동 키워드",
+  action: n,
+  ...e
+}) {
+  return /* @__PURE__ */ d(
+    t,
+    {
+      tag: "section",
+      flexDirection: "column",
+      gap: 4,
+      "aria-labelledby": "preferred-activity-keyword-group-title",
+      ...e,
+      inlineCSS: { width: "100%", ...e == null ? void 0 : e.inlineCSS },
+      children: [
+        /* @__PURE__ */ i(c, { id: "preferred-activity-keyword-group-title", tag: "h2", variant: "h2B", children: a }),
+        r.length > 0 && /* @__PURE__ */ i(t, { tag: "ul", flexWrap: "wrap", gap: 2, alignItems: "center", children: r.map((l) => /* @__PURE__ */ i(g, { tag: "li", variant: "outlined", children: l }, l)) }),
+        n && /* @__PURE__ */ i(
+          t,
+          {
+            mt: 2,
+            alignItems: "center",
+            justifyContent: "center",
+            inlineCSS: { width: "inherit" },
+            children: n
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  f as default
+};

package/dist/teacher/profile/components/PreferredActivityKeywordGroup/index.d.ts

@@ -0,0 +1,3 @@
+import { default as PreferredActivityKeywordGroup, PreferredActivityKeywordGroupProps } from './PreferredActivityKeywordGroup';
+export type { PreferredActivityKeywordGroupProps };
+export default PreferredActivityKeywordGroup;

package/dist/teacher/profile/components/PreferredActivityKeywordGroup/index.mjs

@@ -0,0 +1,4 @@
+import e from "./PreferredActivityKeywordGroup.mjs";
+export {
+  e as default
+};

package/dist/teacher/profile/components/PreferredAgeGroup/PreferredAgeGroup.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
+export interface PreferredAgeGroupProps extends FlexboxProps {
+    keywords: string[];
+    action?: ReactNode;
+}
+declare function PreferredAgeGroup({ keywords, action, ...props }: PreferredAgeGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default PreferredAgeGroup;

package/dist/teacher/profile/components/PreferredAgeGroup/PreferredAgeGroup.mjs

@@ -0,0 +1,32 @@
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import { Flexbox as t, Typography as g, Label as c } from "@dotss/ui";
+function u({ keywords: r, action: n, ...e }) {
+  return /* @__PURE__ */ a(
+    t,
+    {
+      tag: "section",
+      flexDirection: "column",
+      gap: 4,
+      "aria-labelledby": "preferred-age-group-title",
+      ...e,
+      inlineCSS: { width: "100%", ...e == null ? void 0 : e.inlineCSS },
+      children: [
+        /* @__PURE__ */ i(g, { id: "preferred-age-group-title", tag: "h2", variant: "h2B", children: "자신 있는 아이 연령" }),
+        r.length > 0 && /* @__PURE__ */ i(t, { tag: "ul", flexWrap: "wrap", gap: 2, alignItems: "center", children: r.map((l) => /* @__PURE__ */ i(c, { tag: "li", variant: "outlined", color: "blue", children: l }, l)) }),
+        n && /* @__PURE__ */ i(
+          t,
+          {
+            mt: 2,
+            alignItems: "center",
+            justifyContent: "center",
+            inlineCSS: { width: "inherit" },
+            children: n
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  u as default
+};