@crystallize/design-system 1.4.0 → 1.4.2

package/src/input-with-label/input-with-label.tsx

@@ -0,0 +1,59 @@
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, forwardRef, ReactNode } from 'react';
+import { cva, cx, VariantProps } from 'class-variance-authority';
+
+import { Input } from '../input';
+import { Label } from '../label';
+import { Triangle } from '../iconography/triangle';
+
+const inputWithLabelStyles = cva(['c-input-with-label'], {
+  variants: {
+    variant: {
+      default: '',
+      elevated: 'c-input-with-label-elevated',
+      outlined: 'c-input-with-label-outlined',
+    },
+    status: {
+      error: 'c-input-with-label--error',
+    },
+  },
+  defaultVariants: {},
+});
+
+type InputWithLabelStylesProps = VariantProps<typeof inputWithLabelStyles>;
+
+export type InputWithLabelProps = InputWithLabelStylesProps & {
+  label: string;
+  append?: ReactNode;
+  errorMessage?: string;
+  labelProps?: ComponentPropsWithoutRef<'label'>;
+} & ComponentPropsWithRef<'input'>;
+
+export type InputWithLabelRef = HTMLInputElement;
+
+export const InputWithLabel = forwardRef<InputWithLabelRef, InputWithLabelProps>(
+  ({ className, label, append, errorMessage, status, variant, id, labelProps, ...delegated }, ref) => {
+    const { className: labelClassName, ...labelPropsRest } = labelProps ?? {};
+
+    return (
+      <>
+        <Label
+          className={inputWithLabelStyles({ status, variant, className: labelClassName })}
+          htmlFor={id}
+          {...labelPropsRest}
+        >
+          {label}
+          <span className="c-input-with-label-input-wrap">
+            <Input className={cx('c-input-with-label-input', className)} ref={ref} id={id} {...delegated} />
+            {!append && !errorMessage ? null : (
+              <div className="c-input-with-label-append" title={errorMessage}>
+                {errorMessage ? <Triangle /> : append}
+              </div>
+            )}
+          </span>
+        </Label>
+      </>
+    );
+  },
+);
+
+InputWithLabel.displayName = 'InputWithLabel';

package/src/label/index.ts

@@ -0,0 +1 @@
+export * from './label';

package/src/label/label.css

@@ -0,0 +1,3 @@
+.c-label {
+  @apply text-sm font-medium text-gray-500-400;
+}

package/src/label/label.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Label } from './label';
+
+const meta: Meta<typeof Label> = {
+  title: 'Components/Label',
+  component: Label,
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Label>;
+
+export const Default: Story = {
+  args: {
+    htmlFor: 'id',
+    children: 'Hello, World!',
+  },
+};

package/src/label/label.tsx

@@ -0,0 +1,13 @@
+import { forwardRef, LabelHTMLAttributes } from 'react';
+import { cx } from 'class-variance-authority';
+
+import './label.css';
+
+type LabelRef = HTMLLabelElement;
+type LabelProps = LabelHTMLAttributes<LabelRef>;
+
+export const Label = forwardRef<LabelRef, LabelProps>(({ className, ...delegated }, ref) => {
+  return <label ref={ref} className={cx('c-label', className)} {...delegated} />;
+});
+
+Label.displayName = 'Label';

package/src/progress/Progress.stories.tsx

@@ -0,0 +1,26 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { useEffect, useState } from 'react';
+import { Progress } from '.';
+
+const meta: Meta<typeof Progress> = {
+  title: 'Components/Progress',
+  component: Progress,
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof Progress>;
+
+export const Default: Story = {
+  name: 'Default',
+  render: () => {
+    const [progress, setProgress] = useState(13);
+
+    useEffect(() => {
+      const timer = setTimeout(() => setProgress(100), 1500);
+      return () => clearTimeout(timer);
+    }, []);
+
+    return <Progress value={progress} />;
+  },
+};

package/src/progress/index.ts

@@ -0,0 +1 @@
+export { Progress } from './progress';

package/src/progress/progress.css

@@ -0,0 +1,7 @@
+.c-progress-root {
+  @apply relative h-4 w-full overflow-hidden rounded-full bg-gray-50-900;
+}
+
+.c-progress-indicator {
+  @apply h-full w-full transform bg-cyan-300-600 duration-500 ease-linear;
+}

package/src/progress/progress.tsx

@@ -0,0 +1,17 @@
+import * as ProgressPrimitives from '@radix-ui/react-progress';
+import { cx } from 'class-variance-authority';
+
+import './progress.css';
+
+type ProgressProps = ProgressPrimitives.ProgressProps;
+
+export function Progress({ className, value }: ProgressProps) {
+  return (
+    <ProgressPrimitives.Root className={cx(className, 'c-progress-root')} value={value}>
+      <ProgressPrimitives.Indicator
+        className="c-progress-indicator"
+        style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
+      />
+    </ProgressPrimitives.Root>
+  );
+}

package/src/radio/index.ts

@@ -0,0 +1 @@
+export * from './radio';

package/src/radio/radio.css

@@ -0,0 +1,20 @@
+.c-radio-item {
+  @apply flex h-3 w-3 flex-shrink-0 items-center justify-center rounded-full border border-solid border-gray-200-700 bg-gray-50-900 p-0;
+
+  &:focus,
+  &:focus-visible {
+    @apply outline-none;
+  }
+
+  &:disabled {
+    @apply bg-gray-100-800 opacity-40;
+  }
+
+  &[aria-checked='true'] {
+    @apply border-cyan-700-200 bg-cyan-200-700;
+  }
+}
+
+.c-radio-indicator {
+  @apply block h-[6px] w-[6px] rounded-full bg-cyan-700-200;
+}

package/src/radio/radio.stories.tsx

@@ -0,0 +1,142 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Radio } from './radio';
+import { Label } from '../label';
+
+const meta: Meta<typeof Radio.Group> = {
+  title: 'Components/Radio',
+  component: Radio.Group,
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Radio.Group>;
+
+export const Example: Story = {
+  render: () => {
+    return (
+      <Radio.Group defaultValue="default">
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="default" id="example-r1" />
+          <Label htmlFor="example-r1">Default</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="comfortable" id="example-r2" />
+          <Label htmlFor="example-r2">Comfortable</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="compact" id="example-r3" />
+          <Label htmlFor="example-r3">Compact</Label>
+        </div>
+      </Radio.Group>
+    );
+  },
+};
+
+export const Uncontrolled: Story = {
+  render: () => {
+    return (
+      <Radio.Group defaultValue="default">
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="default" id="uncontrolled-r1" />
+          <Label htmlFor="uncontrolled-r1">Default</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="comfortable" id="uncontrolled-r2" />
+          <Label htmlFor="uncontrolled-r2">Comfortable</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="compact" id="uncontrolled-r3" />
+          <Label htmlFor="uncontrolled-r3">Compact</Label>
+        </div>
+      </Radio.Group>
+    );
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState('default');
+    return (
+      <Radio.Group value={value} onValueChange={v => setValue(v)}>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="default" id="controlled-r1" />
+          <Label htmlFor="controlled-r1">Default</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="comfortable" id="controlled-r2" />
+          <Label htmlFor="controlled-r2">Comfortable</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="compact" id="controlled-r3" />
+          <Label htmlFor="controlled-r3">Compact</Label>
+        </div>
+      </Radio.Group>
+    );
+  },
+};
+
+export const Horizontal: Story = {
+  render: () => {
+    return (
+      <Radio.Group defaultValue="default" orientation="horizontal" className="flex space-x-6">
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="default" id="horizontal-r1" />
+          <Label htmlFor="horizontal-r1">Default</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="comfortable" id="horizontal-r2" />
+          <Label htmlFor="horizontal-r2">Comfortable</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="compact" id="horizontal-r3" />
+          <Label htmlFor="horizontal-r3">Compact</Label>
+        </div>
+      </Radio.Group>
+    );
+  },
+};
+
+export const NoLoop: Story = {
+  render: () => {
+    return (
+      <Radio.Group defaultValue="default" loop={false}>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="default" id="noloop-r1" />
+          <Label htmlFor="noloop-r1">Default</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="comfortable" id="noloop-r2" />
+          <Label htmlFor="noloop-r2">Comfortable</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="compact" id="noloop-r3" />
+          <Label htmlFor="noloop-r3">Compact</Label>
+        </div>
+      </Radio.Group>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => {
+    return (
+      <Radio.Group defaultValue="default">
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="default" id="disabled-r1" />
+          <Label htmlFor="disabled-r1">Default</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="comfortable" id="disabled-r2" disabled />
+          <Label htmlFor="disabled-r2">Comfortable</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Radio.Item value="compact" id="disabled-r3" />
+          <Label htmlFor="disabled-r3">Compact</Label>
+        </div>
+      </Radio.Group>
+    );
+  },
+};

package/src/radio/radio.tsx

@@ -0,0 +1,19 @@
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import type { ComponentProps } from 'react';
+
+import './radio.css';
+
+type RadioGroupItemProps = ComponentProps<typeof RadioGroupPrimitive.Item>;
+
+function RadioGroupItem(props: RadioGroupItemProps) {
+  return (
+    <RadioGroupPrimitive.Item {...props} className="c-radio-item">
+      <RadioGroupPrimitive.Indicator className="c-radio-indicator" />
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+export const Radio = {
+  Group: RadioGroupPrimitive.Root,
+  Item: RadioGroupItem,
+};

package/src/rich-text-editor/appSettings.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export type SettingName =
+  | 'disableBeforeInput'
+  | 'measureTypingPerf'
+  | 'isCharLimit'
+  | 'isMaxLength'
+  | 'isCharLimitUtf8'
+  | 'isAutocomplete'
+  | 'showNestedEditorTreeView';
+
+export type Settings = Record<SettingName, boolean>;
+
+export const DEFAULT_SETTINGS: Settings = {
+  disableBeforeInput: false,
+  isAutocomplete: false,
+  isCharLimit: false,
+  isCharLimitUtf8: false,
+  isMaxLength: false,
+  measureTypingPerf: false,
+  showNestedEditorTreeView: false,
+};

package/src/rich-text-editor/context/SettingsContext.tsx

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type { SettingName } from '../appSettings';
+
+import { createContext, ReactNode, useCallback, useContext, useMemo, useState } from 'react';
+
+import { DEFAULT_SETTINGS } from '../appSettings';
+
+type SettingsContextShape = {
+  setOption: (name: SettingName, value: boolean) => void;
+  settings: Record<SettingName, boolean>;
+};
+
+const Context: React.Context<SettingsContextShape> = createContext({
+  setOption: (name: SettingName, value: boolean) => {
+    // eslint-disable-next-line no-console
+    console.log({ name, value });
+    return;
+  },
+  settings: DEFAULT_SETTINGS,
+});
+
+export const SettingsContext = ({ children }: { children: ReactNode }): JSX.Element => {
+  const [settings, setSettings] = useState(DEFAULT_SETTINGS);
+
+  const setOption = useCallback((setting: SettingName, value: boolean) => {
+    setSettings(options => ({
+      ...options,
+      [setting as string]: value,
+    }));
+    if (DEFAULT_SETTINGS[setting] === value) {
+      setURLParam(setting, null);
+    } else {
+      setURLParam(setting, value);
+    }
+  }, []);
+
+  const contextValue = useMemo(() => {
+    return { setOption, settings };
+  }, [setOption, settings]);
+
+  return <Context.Provider value={contextValue}>{children}</Context.Provider>;
+};
+
+export const useSettings = (): SettingsContextShape => {
+  return useContext(Context);
+};
+
+function setURLParam(param: SettingName, value: null | boolean) {
+  const url = new URL(window.location.href);
+  const params = new URLSearchParams(url.search);
+  if (value !== null) {
+    if (params.has(param)) {
+      params.set(param, String(value));
+    } else {
+      params.append(param, String(value));
+    }
+  } else {
+    if (params.has(param)) {
+      params.delete(param);
+    }
+  }
+  url.search = params.toString();
+  window.history.pushState(null, '', url.toString());
+}

package/src/rich-text-editor/context/SharedAutocompleteContext.tsx

@@ -0,0 +1,60 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { createContext, ReactNode, useContext, useEffect, useMemo, useState } from 'react';
+
+type Suggestion = null | string;
+type CallbackFn = (newSuggestion: Suggestion) => void;
+type SubscribeFn = (callbackFn: CallbackFn) => () => void;
+type PublishFn = (newSuggestion: Suggestion) => void;
+type ContextShape = [SubscribeFn, PublishFn];
+type HookShape = [suggestion: Suggestion, setSuggestion: PublishFn];
+
+const Context: React.Context<ContextShape> = createContext([
+  _cb => () => {
+    return;
+  },
+  (_newSuggestion: Suggestion) => {
+    return;
+  },
+]);
+
+export const SharedAutocompleteContext = ({ children }: { children: ReactNode }): JSX.Element => {
+  const context: ContextShape = useMemo(() => {
+    let suggestion: Suggestion | null = null;
+    const listeners: Set<CallbackFn> = new Set();
+    return [
+      (cb: (newSuggestion: Suggestion) => void) => {
+        cb(suggestion);
+        listeners.add(cb);
+        return () => {
+          listeners.delete(cb);
+        };
+      },
+      (newSuggestion: Suggestion) => {
+        suggestion = newSuggestion;
+        for (const listener of listeners) {
+          listener(newSuggestion);
+        }
+      },
+    ];
+  }, []);
+  return <Context.Provider value={context}>{children}</Context.Provider>;
+};
+
+export const useSharedAutocompleteContext = (): HookShape => {
+  const [subscribe, publish]: ContextShape = useContext(Context);
+  const [suggestion, setSuggestion] = useState<Suggestion>(null);
+  useEffect(() => {
+    return subscribe((newSuggestion: Suggestion) => {
+      setSuggestion(newSuggestion);
+    });
+  }, [subscribe]);
+  return [suggestion, publish];
+};

package/src/rich-text-editor/context/SharedHistoryContext.tsx

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { createContext, ReactNode, useContext, useMemo } from 'react';
+import { createEmptyHistoryState, type HistoryState } from '@lexical/react/LexicalHistoryPlugin';
+
+type ContextShape = {
+  historyState?: HistoryState;
+};
+
+const Context: React.Context<ContextShape> = createContext({});
+
+export const SharedHistoryContext = ({ children }: { children: ReactNode }): JSX.Element => {
+  const historyContext = useMemo(() => ({ historyState: createEmptyHistoryState() }), []);
+  return <Context.Provider value={historyContext}>{children}</Context.Provider>;
+};
+
+export const useSharedHistoryContext = (): ContextShape => {
+  return useContext(Context);
+};

package/src/rich-text-editor/hooks/useReport.ts

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {useCallback, useEffect, useRef} from 'react';
+
+const getElement = (): HTMLElement => {
+  let element = document.getElementById('report-container');
+
+  if (element === null) {
+    element = document.createElement('div');
+    element.id = 'report-container';
+    element.style.position = 'fixed';
+    element.style.top = '50%';
+    element.style.left = '50%';
+    element.style.fontSize = '32px';
+    element.style.transform = 'translate(-50%, -50px)';
+    element.style.padding = '20px';
+    element.style.background = 'rgba(240, 240, 240, 0.4)';
+    element.style.borderRadius = '20px';
+
+    if (document.body) {
+      document.body.appendChild(element);
+    }
+  }
+
+  return element;
+};
+
+export default function useReport(): (
+  arg0: string,
+) => ReturnType<typeof setTimeout> {
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const cleanup = useCallback(() => {
+    if (timer !== null) {
+      clearTimeout(timer.current as ReturnType<typeof setTimeout>);
+    }
+
+    if (document.body) {
+      document.body.removeChild(getElement());
+    }
+  }, []);
+
+  useEffect(() => {
+    return cleanup;
+  }, [cleanup]);
+
+  return useCallback(
+    (content) => {
+      // eslint-disable-next-line no-console
+      console.log(content);
+      const element = getElement();
+      clearTimeout(timer.current as ReturnType<typeof setTimeout>);
+      element.innerHTML = content;
+      timer.current = setTimeout(cleanup, 1000);
+      return timer.current;
+    },
+    [cleanup],
+  );
+}

package/src/rich-text-editor/images/emoji/LICENSE.md

@@ -0,0 +1,5 @@
+OpenMoji
+https://openmoji.org
+
+Licensed under Attribution-ShareAlike 4.0 International
+https://creativecommons.org/licenses/by-sa/4.0/

package/src/rich-text-editor/images/icons/LICENSE.md

@@ -0,0 +1,5 @@
+Bootstrap Icons
+https://icons.getbootstrap.com
+
+Licensed under MIT license
+https://github.com/twbs/icons/blob/main/LICENSE.md

package/src/rich-text-editor/images/icons/arrow-clockwise.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise"><path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/><path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/></svg>

package/src/rich-text-editor/images/icons/arrow-counterclockwise.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise"><path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/><path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/></svg>

package/src/rich-text-editor/images/icons/bg-color.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-opacity=".01" d="M0 0h48v48H0z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M37 37a4 4 0 0 0 4-4c0-1.473-1.333-3.473-4-6-2.667 2.527-4 4.527-4 6a4 4 0 0 0 4 4Z" fill="#777"/><path d="m20.854 5.504 3.535 3.536" stroke="#777" stroke-width="4" stroke-linecap="round"/><path d="M23.682 8.333 8.125 23.889 19.44 35.203l15.556-15.557L23.682 8.333Z" stroke="#777" stroke-width="4" stroke-linejoin="round"/><path d="m12 20.073 16.961 5.577M4 43h40" stroke="#777" stroke-width="4" stroke-linecap="round"/></svg>

package/src/rich-text-editor/images/icons/camera.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera"><path d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1v6zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2z"/><path d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM3 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/></svg>

package/src/rich-text-editor/images/icons/card-checklist.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-card-checklist"><path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/><path d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/></svg>

package/src/rich-text-editor/images/icons/caret-right-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-right-fill"><path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/></svg>

package/src/rich-text-editor/images/icons/chat-left-text.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-left-text"><path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4.414A2 2 0 0 0 3 11.586l-2 2V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6zm0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/></svg>

package/src/rich-text-editor/images/icons/chat-right-dots.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-right-dots"><path d="M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1H2zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12z"/><path d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>

package/src/rich-text-editor/images/icons/chat-right-text.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-right-text"><path d="M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1H2zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12z"/><path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6zm0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/></svg>

package/src/rich-text-editor/images/icons/chat-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-right"><path d="M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1H2zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12z"/></svg>