@uniai-fe/ui-legacy 0.1.1

package/src/template/health-score/styles/styled/chart.ts

@@ -0,0 +1,26 @@
+"use client";
+
+import { styled } from "styled-components";
+import Chart from "../../../../chart";
+
+const container = styled(Chart.ContentsContainer)``;
+
+const title = styled.div`
+  width: 100%;
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  h5 {
+    font-size: 20px;
+    color: var(--color_90);
+    font-weight: 600;
+  }
+`;
+
+const StyledHealthScore = {
+  container,
+  title,
+};
+
+export default StyledHealthScore;

package/src/template.tsx

@@ -0,0 +1,5 @@
+import HealthScoreChart from "./template/health-score";
+import Compare from "./template/compare";
+import Filter from "./template/filter";
+
+export { HealthScoreChart, Compare, Filter };

package/src/text-editor/components/Container.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { clsx } from "clsx";
+import { RichTextEditor, type RichTextEditorProps } from "@mantine/tiptap";
+import { type Editor } from "@tiptap/react";
+
+import TextEditorToolbarContainer from "./toolbar/Container";
+import TextEditorControlsGroup from "./toolbar/ControlsGroup";
+import TextEditorControlBold from "./toolbar/text/Bold";
+import TextEditorControlItalic from "./toolbar/text/Italic";
+import TextEditorControlUnderline from "./toolbar/text/Underline";
+import TextEditorControlStrike from "./toolbar/text/Strike";
+import TextEditorControlListBullet from "./toolbar/list/Bullet";
+import TextEditorControlListOrdered from "./toolbar/list/Ordered";
+import TextEditorControlAlignLeft from "./toolbar/align/Left";
+import TextEditorControlAlignCenter from "./toolbar/align/Center";
+import TextEditorControlAlignJustify from "./toolbar/align/Justify";
+import TextEditorControlAlignRight from "./toolbar/align/Right";
+import TextEditorContents from "./Contents";
+import StyledTextEditorBase from "../styles/styled/editor";
+
+export default function TextEditorContainer({
+  className,
+  children,
+  editor,
+  editorProps,
+}: {
+  editor: Editor | null;
+} & Partial<{
+  className: string;
+  children: React.ReactNode;
+  editorProps: Omit<RichTextEditorProps, "editor">;
+}>) {
+  return (
+    <StyledTextEditorBase.Container
+      as={RichTextEditor}
+      className={clsx("text-editor", className)}
+      {...editorProps}
+      editor={editor}
+    >
+      {typeof children === "undefined" ? (
+        <>
+          <TextEditorToolbarContainer>
+            <TextEditorControlsGroup>
+              <TextEditorControlBold />
+              <TextEditorControlItalic />
+              <TextEditorControlUnderline />
+              <TextEditorControlStrike />
+            </TextEditorControlsGroup>
+            <TextEditorControlsGroup>
+              <TextEditorControlListBullet />
+              <TextEditorControlListOrdered />
+            </TextEditorControlsGroup>
+            <TextEditorControlsGroup>
+              <TextEditorControlAlignLeft />
+              <TextEditorControlAlignCenter />
+              <TextEditorControlAlignRight />
+              <TextEditorControlAlignJustify />
+            </TextEditorControlsGroup>
+          </TextEditorToolbarContainer>
+        </>
+      ) : (
+        children
+      )}
+      <TextEditorContents />
+    </StyledTextEditorBase.Container>
+  );
+}

package/src/text-editor/components/Contents.tsx

@@ -0,0 +1,14 @@
+import { RichTextEditor } from "@mantine/tiptap";
+import { clsx } from "clsx";
+
+export default function TextEditorContents({
+  className,
+}: {
+  className?: string;
+}) {
+  return (
+    <RichTextEditor.Content
+      className={clsx("text-editor-contents", className)}
+    />
+  );
+}

package/src/text-editor/components/toolbar/Container.tsx

@@ -0,0 +1,20 @@
+import { RichTextEditor } from "@mantine/tiptap";
+import { clsx } from "clsx";
+
+export default function TextEditorToolbarContainer({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <RichTextEditor.Toolbar
+      className={clsx("text-editor-toolbar", className)}
+      sticky
+      stickyOffset={60}
+    >
+      {children}
+    </RichTextEditor.Toolbar>
+  );
+}

package/src/text-editor/components/toolbar/ControlsGroup.tsx

@@ -0,0 +1,18 @@
+import { RichTextEditor } from "@mantine/tiptap";
+import { clsx } from "clsx";
+
+export default function TextEditorControlsGroup({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <RichTextEditor.ControlsGroup
+      className={clsx("text-editor-toolbar-controls-group", className)}
+    >
+      {children}
+    </RichTextEditor.ControlsGroup>
+  );
+}

package/src/text-editor/components/toolbar/align/Center.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { clsx } from "clsx";
+import { RichTextEditor } from "@mantine/tiptap";
+import AlignCenterIcon from "../../../svg/align/center.svg";
+
+export default function TextEditorControlAlignCenter({
+  className,
+}: {
+  className?: string;
+}) {
+  const Icon = () => (
+    <figure>
+      <AlignCenterIcon viewBox="0 0 18 18" width={18} height={18} />
+    </figure>
+  );
+  return (
+    <RichTextEditor.AlignCenter
+      className={clsx("text-editor-control-button align-center", className)}
+      icon={Icon}
+    />
+  );
+}

package/src/text-editor/components/toolbar/align/Justify.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { clsx } from "clsx";
+import { RichTextEditor } from "@mantine/tiptap";
+import AlignJustifyIcon from "../../../svg/align/justify.svg";
+
+export default function TextEditorControlAlignJustify({
+  className,
+}: {
+  className?: string;
+}) {
+  const Icon = () => (
+    <figure>
+      <AlignJustifyIcon viewBox="0 0 18 18" width={18} height={18} />
+    </figure>
+  );
+  return (
+    <RichTextEditor.AlignJustify
+      className={clsx("text-editor-control-button align-justify", className)}
+      icon={Icon}
+    />
+  );
+}

package/src/text-editor/components/toolbar/align/Left.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { clsx } from "clsx";
+import { RichTextEditor } from "@mantine/tiptap";
+import AlignLeftIcon from "../../../svg/align/left.svg";
+
+export default function TextEditorControlAlignLeft({
+  className,
+}: {
+  className?: string;
+}) {
+  const Icon = () => (
+    <figure>
+      <AlignLeftIcon viewBox="0 0 18 18" width={18} height={18} />
+    </figure>
+  );
+  return (
+    <RichTextEditor.AlignLeft
+      className={clsx("text-editor-control-button align-left", className)}
+      icon={Icon}
+    />
+  );
+}

package/src/text-editor/components/toolbar/align/Right.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { clsx } from "clsx";
+import { RichTextEditor } from "@mantine/tiptap";
+import AlignRightIcon from "../../../svg/align/right.svg";
+
+export default function TextEditorControlAlignRight({
+  className,
+}: {
+  className?: string;
+}) {
+  const Icon = () => (
+    <figure>
+      <AlignRightIcon viewBox="0 0 18 18" width={18} height={18} />
+    </figure>
+  );
+  return (
+    <RichTextEditor.AlignRight
+      className={clsx("text-editor-control-button align-right", className)}
+      icon={Icon}
+    />
+  );
+}

package/src/text-editor/components/toolbar/index.tsx

@@ -0,0 +1,35 @@
+import TextEditorControlAlignCenter from "./align/Center";
+import TextEditorControlAlignJustify from "./align/Justify";
+import TextEditorControlAlignLeft from "./align/Left";
+import TextEditorControlAlignRight from "./align/Right";
+import TextEditorToolbarContainer from "./Container";
+import TextEditorControlsGroup from "./ControlsGroup";
+import TextEditorControlListBullet from "./list/Bullet";
+import TextEditorControlListOrdered from "./list/Ordered";
+import TextEditorControlBold from "./text/Bold";
+import TextEditorControlItalic from "./text/Italic";
+import TextEditorControlStrike from "./text/Strike";
+import TextEditorControlUnderline from "./text/Underline";
+
+const TextEditorToolbar = {
+  Container: TextEditorToolbarContainer,
+  ControlsGroup: TextEditorControlsGroup,
+  Text: {
+    Bold: TextEditorControlBold,
+    Italic: TextEditorControlItalic,
+    Underline: TextEditorControlUnderline,
+    Strike: TextEditorControlStrike,
+  },
+  List: {
+    Bullet: TextEditorControlListBullet,
+    Ordered: TextEditorControlListOrdered,
+  },
+  Align: {
+    Left: TextEditorControlAlignLeft,
+    Center: TextEditorControlAlignCenter,
+    Right: TextEditorControlAlignRight,
+    Justify: TextEditorControlAlignJustify,
+  },
+};
+
+export default TextEditorToolbar;

package/src/text-editor/components/toolbar/list/Bullet.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { clsx } from "clsx";
+import { RichTextEditor } from "@mantine/tiptap";
+import ListBulletIcon from "../../../svg/list/bullet.svg";
+
+export default function TextEditorControlListBullet({
+  className,
+}: {
+  className?: string;
+}) {
+  const Icon = () => (
+    <figure>
+      <ListBulletIcon viewBox="0 0 18 18" width={18} height={18} />
+    </figure>
+  );
+  return (
+    <RichTextEditor.BulletList
+      className={clsx("text-editor-control-button bullet-list", className)}
+      icon={Icon}
+    />
+  );
+}

package/src/text-editor/components/toolbar/list/Ordered.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { clsx } from "clsx";
+import { RichTextEditor } from "@mantine/tiptap";
+import ListOrderedIcon from "../../../svg/list/ordered.svg";
+
+export default function TextEditorControlListOrdered({
+  className,
+}: {
+  className?: string;
+}) {
+  const Icon = () => (
+    <figure>
+      <ListOrderedIcon viewBox="0 0 18 18" width={18} height={18} />
+    </figure>
+  );
+  return (
+    <RichTextEditor.OrderedList
+      className={clsx("text-editor-control-button ordered-list", className)}
+      icon={Icon}
+    />
+  );
+}

package/src/text-editor/components/toolbar/text/Bold.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { clsx } from "clsx";
+import { RichTextEditor } from "@mantine/tiptap";
+import BoldIcon from "../../../svg/text/bold.svg";
+
+export default function TextEditorControlBold({
+  className,
+}: {
+  className?: string;
+}) {
+  const Icon = () => (
+    <figure>
+      <BoldIcon viewBox="0 0 18 18" width={18} height={18} />
+    </figure>
+  );
+  return (
+    <RichTextEditor.Bold
+      className={clsx("text-editor-control-button text-bold", className)}
+      icon={Icon}
+    />
+  );
+}

package/src/text-editor/components/toolbar/text/Italic.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { clsx } from "clsx";
+import { RichTextEditor } from "@mantine/tiptap";
+import ItalicIcon from "../../../svg/text/italic.svg";
+
+export default function TextEditorControlItalic({
+  className,
+}: {
+  className?: string;
+}) {
+  const Icon = () => (
+    <figure>
+      <ItalicIcon viewBox="0 0 18 18" width={18} height={18} />
+    </figure>
+  );
+  return (
+    <RichTextEditor.Italic
+      className={clsx("text-editor-control-button text-italic", className)}
+      icon={Icon}
+    />
+  );
+}

package/src/text-editor/components/toolbar/text/Strike.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { clsx } from "clsx";
+import { RichTextEditor } from "@mantine/tiptap";
+import StrikeIcon from "../../../svg/text/strikethrough.svg";
+
+export default function TextEditorControlStrike({
+  className,
+}: {
+  className?: string;
+}) {
+  const Icon = () => (
+    <figure>
+      <StrikeIcon viewBox="0 0 18 18" width={18} height={18} />
+    </figure>
+  );
+
+  return (
+    <RichTextEditor.Strikethrough
+      className={clsx(
+        "text-editor-control-button text-strikethrough",
+        className,
+      )}
+      icon={Icon}
+    />
+  );
+}

package/src/text-editor/components/toolbar/text/Underline.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { clsx } from "clsx";
+import { RichTextEditor } from "@mantine/tiptap";
+import UnderlineIcon from "../../../svg/text/underline.svg";
+
+export default function TextEditorControlUnderline({
+  className,
+}: {
+  className?: string;
+}) {
+  const Icon = () => (
+    <figure>
+      <UnderlineIcon viewBox="0 0 18 18" width={18} height={18} />
+    </figure>
+  );
+  return (
+    <RichTextEditor.Underline
+      className={clsx("text-editor-control-button text-underline", className)}
+      icon={Icon}
+    />
+  );
+}

package/src/text-editor/index.tsx

@@ -0,0 +1,11 @@
+import TextEditorContainer from "./components/Container";
+import TextEditorContents from "./components/Contents";
+import TextEditorToolbar from "./components/toolbar";
+
+const TextEditor = {
+  Container: TextEditorContainer,
+  Toolbar: { ...TextEditorToolbar },
+  Contents: TextEditorContents,
+};
+
+export default TextEditor;

package/src/text-editor/styled.tsx

@@ -0,0 +1,5 @@
+import StyledTextEditorBase from "./styles/styled/editor";
+
+const StyledTextEditor = { ...StyledTextEditorBase };
+
+export default StyledTextEditor;

package/src/text-editor/styles/scss/style.scss

@@ -0,0 +1,10 @@
+.text-editor-toolbar {
+  figure {
+    width: 1.8rem;
+    height: 1.8rem;
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

package/src/text-editor/styles/scss/theme.scss

@@ -0,0 +1,17 @@
+:root {
+  --text-editor-container-border-color: var(--color_20);
+
+  --text-editor-control-container-padding-vertical: 1.2rem;
+  --text-editor-control-container-padding-horizontal: 1.2rem;
+  --text-editor-control-container-bg-color: var(--color_5);
+  --text-editor-control-button-size: 2.8rem;
+  --text-editor-control-button-border-color: #dee2e6;
+  --text-editor-control-button-icon-color: #495057;
+
+  --text-editor-contents-padding-vertical: 1.2rem;
+  --text-editor-contents-padding-horizontal: 1.6rem;
+  --text-editor-contents-bg-color: var(--color_0);
+  --text-editor-contents-text-size: 1.6rem;
+  --text-editor-contents-text-color: var(--color_90);
+  --text-editor-contents-line-height: 1.55em;
+}

package/src/text-editor/styles/styled/editor.ts

@@ -0,0 +1,73 @@
+"use client";
+
+import styled from "styled-components";
+
+const Container = styled.div`
+  --mantine-radius-default: 0.4rem;
+  border-width: 1px;
+  border-color: var(--text-editor-container-border-color);
+  background-color: var(--text-editor-contents-bg-color);
+
+  .text-editor-toolbar {
+    --mantine-radius-default: 0.2rem;
+    --mantine-color-body: var(--text-editor-control-container-bg-color);
+    --mantine-color-white: var(--text-editor-control-container-bg-color);
+    --mantine-color-gray-4: var(--text-editor-control-button-border-color);
+    --mantine-color-gray-7: var(--text-editor-control-button-icon-color);
+
+    padding: var(--text-editor-control-container-padding-vertical)
+      var(--text-editor-control-container-padding-horizontal);
+    border-bottom-width: 1px;
+    border-color: var(--text-editor-container-border-color);
+    background-color: var(--text-editor-control-container-bg-color);
+
+    .mantine-UnstyledButton-root {
+      width: var(--text-editor-control-button-size);
+      height: var(--text-editor-control-button-size);
+    }
+  }
+
+  .mantine-Typography-root {
+    --mantine-font-size-md: var(--text-editor-contents-text-size);
+    --mantine-color-text: var(--text-editor-contents-text-color);
+    --mantine-line-height: var(--text-editor-contents-line-height);
+
+    font-size: var(--text-editor-contents-text-size);
+    line-height: var(--text-editor-contents-line-height);
+    color: var(--text-editor-contents-text-color);
+
+    height: calc(
+      100% - var(--text-editor-control-container-padding-vertical) *
+        2 - var(--text-editor-control-button-size) - 1px
+    );
+
+    ul {
+      padding-left: 1.4em;
+      li {
+        list-style: disc;
+      }
+    }
+    ol {
+      padding-left: 1.4em;
+      li {
+        list-style: decimal;
+      }
+    }
+
+    .mantine-RichTextEditor-content {
+      height: 100%;
+    }
+
+    .ProseMirror {
+      height: 100%;
+      padding: var(--text-editor-contents-padding-vertical)
+        var(--text-editor-contents-padding-horizontal);
+    }
+  }
+`;
+
+const StyledTextEditorBase = {
+  Container,
+};
+
+export default StyledTextEditorBase;

package/src/text-editor/svg/align/center.svg

@@ -0,0 +1,6 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5 7.5H4.5" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.75 4.5H2.25" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.75 10.5H2.25" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.5 13.5H4.5" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/text-editor/svg/align/justify.svg

@@ -0,0 +1,6 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.75 4.5H2.25" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.75 7.5H2.25" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.75 10.5H2.25" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.75 13.5H2.25" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/text-editor/svg/align/left.svg

@@ -0,0 +1,6 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.75 7.5H2.25" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.75 4.5H2.25" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.75 10.5H2.25" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.75 13.5H2.25" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/text-editor/svg/align/right.svg

@@ -0,0 +1,6 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.75 7.5H5.25" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.75 4.5H2.25" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.75 10.5H2.25" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.75 13.5H5.25" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/text-editor/svg/list/bullet.svg

@@ -0,0 +1,8 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 4.5H15.75" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 9H15.75" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 13.5H15.75" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.25 4.5H2.2575" stroke="#495057" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.25 9H2.2575" stroke="#495057" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.25 13.5H2.2575" stroke="#495057" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/text-editor/svg/list/ordered.svg

@@ -0,0 +1,8 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 4.5H15.75" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 9H15.75" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 13.5H15.75" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.002 3.50631C1.946 3.52765 1.858 3.55298 1.738 3.58231C1.618 3.61165 1.52067 3.63165 1.446 3.64231L1.406 3.41831C1.542 3.38898 1.68067 3.33965 1.822 3.27031C1.966 3.20098 2.086 3.12498 2.182 3.04231H2.186L2.43 3.08231V5.33831L2.926 5.37431V5.57031H1.486V5.37431L2.002 5.33831V3.50631Z" fill="#495057"/>
+<path d="M1.438 10.0127C1.68333 9.874 1.90867 9.71533 2.114 9.53666C2.31933 9.35533 2.482 9.16866 2.602 8.97666C2.72467 8.78466 2.786 8.60333 2.786 8.43266C2.786 8.286 2.742 8.17 2.654 8.08466C2.566 7.99666 2.44067 7.95266 2.278 7.95266C2.126 7.95266 1.99533 7.98333 1.886 8.04466C1.77667 8.10333 1.67533 8.17666 1.582 8.26466L1.454 8.08466C1.54733 7.97533 1.68067 7.87666 1.854 7.78866C2.02733 7.698 2.21267 7.65266 2.41 7.65266C2.59667 7.65266 2.754 7.68733 2.882 7.75666C3.01 7.82333 3.10467 7.91133 3.166 8.02066C3.22733 8.13 3.258 8.25 3.258 8.38066C3.258 8.64466 3.13133 8.91666 2.878 9.19666C2.62467 9.474 2.30733 9.72333 1.926 9.94466L3.166 9.85266L3.306 9.50866L3.51 9.54866L3.406 10.1807H1.498L1.438 10.0127Z" fill="#495057"/>
+<path d="M1.878 15.0063C1.81667 15.0063 1.74867 15.001 1.674 14.9903C1.59933 14.9823 1.53667 14.9716 1.486 14.9583V14.7303C1.574 14.757 1.67933 14.7703 1.802 14.7703C2.01267 14.7703 2.194 14.737 2.346 14.6703C2.50067 14.6036 2.618 14.513 2.698 14.3983C2.78067 14.2836 2.822 14.1583 2.822 14.0223C2.822 13.841 2.766 13.701 2.654 13.6023C2.54467 13.501 2.37533 13.449 2.146 13.4463L2.022 13.4783C1.934 13.505 1.89133 13.517 1.894 13.5143L1.826 13.3023C1.938 13.281 2.04333 13.249 2.142 13.2063C2.30733 13.137 2.44067 13.045 2.542 12.9303C2.64333 12.813 2.694 12.689 2.694 12.5583C2.694 12.4063 2.64867 12.2956 2.558 12.2263C2.47 12.1543 2.35667 12.1183 2.218 12.1183C2.098 12.1183 1.982 12.1396 1.87 12.1823C1.76067 12.225 1.666 12.277 1.586 12.3383L1.478 12.1583C1.55267 12.0836 1.67133 12.0116 1.834 11.9423C1.99933 11.8703 2.16733 11.8343 2.338 11.8343C2.58067 11.8343 2.77667 11.8876 2.926 11.9943C3.07533 12.0983 3.15 12.2583 3.15 12.4743C3.15 12.6636 3.07533 12.8356 2.926 12.9903C2.77667 13.145 2.59933 13.2583 2.394 13.3303C2.42067 13.3276 2.458 13.3263 2.506 13.3263C2.66333 13.3263 2.802 13.3556 2.922 13.4143C3.042 13.473 3.134 13.553 3.198 13.6543C3.26467 13.753 3.298 13.865 3.298 13.9903C3.298 14.185 3.23933 14.3596 3.122 14.5143C3.00467 14.669 2.838 14.789 2.622 14.8743C2.40867 14.9623 2.16067 15.0063 1.878 15.0063Z" fill="#495057"/>
+</svg>

package/src/text-editor/svg/text/bold.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 3H10.5C11.2956 3 12.0587 3.31607 12.6213 3.87868C13.1839 4.44129 13.5 5.20435 13.5 6C13.5 6.79565 13.1839 7.55871 12.6213 8.12132C12.0587 8.68393 11.2956 9 10.5 9H4.5V3Z" stroke="#495057" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.5 9H11.25C12.0456 9 12.8087 9.31607 13.3713 9.87868C13.9339 10.4413 14.25 11.2044 14.25 12C14.25 12.7956 13.9339 13.5587 13.3713 14.1213C12.8087 14.6839 12.0456 15 11.25 15H4.5V9Z" stroke="#495057" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/text-editor/svg/text/italic.svg

@@ -0,0 +1,5 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.25 3H7.5" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.5 15H3.75" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.25 3L6.75 15" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/text-editor/svg/text/strikethrough.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 4V9.25C4.5 10.4435 4.97411 11.5881 5.81802 12.432C6.66193 13.2759 7.80653 13.75 9 13.75C10.1935 13.75 11.3381 13.2759 12.182 12.432C13.0259 11.5881 13.5 10.4435 13.5 9.25V4" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 9.75H15" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/text-editor/svg/text/underline.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 2.25V7.5C4.5 8.69347 4.97411 9.83807 5.81802 10.682C6.66193 11.5259 7.80653 12 9 12C10.1935 12 11.3381 11.5259 12.182 10.682C13.0259 9.83807 13.5 8.69347 13.5 7.5V2.25" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 15.75H15" stroke="#495057" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/text-editor/text-editor.scss

@@ -0,0 +1,2 @@
+@use "./styles/scss/theme.scss";
+@use "./styles/scss/style.scss";