@licklist/design 0.78.27 → 0.78.29

package/src/v2/components/NewInput/NewInput.tsx

@@ -0,0 +1,96 @@
+import React, {InputHTMLAttributes, TextareaHTMLAttributes, forwardRef, ReactNode} from 'react';
+import '../../styles/form/NewInput.scss';
+
+type CommonInputProps = {
+  label?: string;
+  optional?: boolean;
+  helperText?: string;
+  error?: string;
+  icon?: ReactNode;
+  required?: boolean;
+}
+
+type InputProps = CommonInputProps & {
+  as?: 'input';
+} & InputHTMLAttributes<HTMLInputElement>
+
+type TextareaProps = CommonInputProps & {
+  as: 'textarea';
+} & TextareaHTMLAttributes<HTMLTextAreaElement>
+
+export type NewInputProps = InputProps | TextareaProps
+
+export const NewInput = forwardRef<HTMLInputElement | HTMLTextAreaElement, NewInputProps>(
+  ({label, optional, helperText, error, icon, as = 'input', required, className = '', ...props}, ref) => {
+    const isError = !!error;
+    const containerClasses = [
+      'new-form-input',
+      isError ? 'new-form-input--error' : '',
+      props.disabled ? 'new-form-input--disabled' : '',
+      className
+    ].filter(Boolean).join(' ');
+
+    const renderInput = () => {
+      if (as === 'textarea') {
+        return (
+          <textarea
+            ref={ref as React.Ref<HTMLTextAreaElement>}
+            className="new-form-input__textarea"
+            {...(props as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}
+          />
+        );
+      }
+
+      if (icon) {
+        return (
+          <div className="new-form-input__input-with-icon">
+            <input
+              ref={ref as React.Ref<HTMLInputElement>}
+              {...(props as React.InputHTMLAttributes<HTMLInputElement>)}
+            />
+            <div className="icon">{icon}</div>
+          </div>
+        );
+      }
+
+      return (
+        <input
+          ref={ref as React.Ref<HTMLInputElement>}
+          className="new-form-input__input"
+          {...(props as React.InputHTMLAttributes<HTMLInputElement>)}
+        />
+      );
+    };
+
+    return (
+      <div className={containerClasses}>
+        {(label || optional) && (
+          <div className="new-form-input__label-row">
+            {label && (
+              <label className="new-form-input__label">
+                {label}
+              </label>
+            )}
+            {optional && <span className="new-form-input__label-optional">Optional</span>}
+          </div>
+        )}
+
+        {renderInput()}
+
+        {helperText && (
+          <p className="new-form-input__helper-text">
+            {helperText}
+          </p>
+        )}
+
+        {error && error !== ' ' && (
+          <p className="new-form-input__error-text">
+            {error}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+NewInput.displayName = 'NewInput';

package/src/v2/components/NewInput/index.ts

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

package/src/v2/components/NewPageHeader/NewPageHeader.scss

@@ -0,0 +1,47 @@
+.new-page-header-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 24px;
+    align-self: stretch;
+    padding-left: 32px;
+    padding-right: 32px;
+
+    @media (max-width: 768px) {
+        padding-left: 16px;
+        padding-right: 16px;
+        gap: 16px;
+    }
+}
+
+.new-page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+    width: 100%;
+    gap: 16px;
+
+    @media (max-width: 768px) {
+        gap: 8px;
+        padding-top: 16px;
+    }
+
+    &__title {
+        color: var(--label-primary);
+        font-family: 'Geist', sans-serif;
+        font-size: 24px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 28px;
+        margin: 0;
+    }
+}
+
+.new-page-header__divider {
+    width: 100%;
+    height: 1px;
+    border: none;
+    background-color: var(--border-primary, #e8e9ef);
+    margin: 0;
+}

package/src/v2/components/NewPageHeader/NewPageHeader.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { NewPageHeader } from './NewPageHeader'
+
+const meta: Meta<typeof NewPageHeader> = {
+  title: 'V2/Components/NewPageHeader',
+  component: NewPageHeader,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof NewPageHeader>
+
+export const Default: Story = {
+  args: {
+    title: 'New waiver',
+    cancelLabel: 'Cancel',
+    onCancel: () => alert('Cancel clicked'),
+  },
+}
+
+export const WithoutCancelButton: Story = {
+  args: {
+    title: 'View Only Page',
+  },
+}
+
+export const LongTitle: Story = {
+  args: {
+    title: 'This is a very long page title that might wrap on smaller screens',
+    cancelLabel: 'Cancel',
+    onCancel: () => alert('Cancel clicked'),
+  },
+}
+
+export const CustomCancelLabel: Story = {
+  args: {
+    title: 'Edit Waiver Template',
+    cancelLabel: 'Go Back',
+    onCancel: () => alert('Go Back clicked'),
+  },
+}

package/src/v2/components/NewPageHeader/NewPageHeader.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Button, ButtonText } from '../Button';
+import './NewPageHeader.scss';
+
+export interface NewPageHeaderProps {
+    title: string;
+    cancelLabel?: string;
+    onCancel?: () => void;
+    className?: string;
+}
+
+export const NewPageHeader: React.FC<NewPageHeaderProps> = ({
+    title,
+    cancelLabel = 'Cancel',
+    onCancel,
+    className = ''
+}) => {
+    return (
+        <div className={`new-page-header-container ${className}`}>
+            <div className="new-page-header">
+                <h1 className="new-page-header__title">{title}</h1>
+                {onCancel && (
+                    <Button
+                        type="button"
+                        variant="destructive-soft"
+                        onClick={onCancel}
+                    >
+                        <ButtonText color="danger">{cancelLabel}</ButtonText>
+                    </Button>
+                )}
+            </div>
+            <hr className="new-page-header__divider" />
+        </div>
+    );
+};

package/src/v2/components/NewPageHeader/index.ts

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

package/src/v2/components/SectionHeader/SectionHeader.scss

@@ -0,0 +1,11 @@
+.section-header {
+  display: flex;
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+  font-size: 17px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  margin: 0;
+  align-self: stretch;
+  color: var(--label-primary, #121E52);
+}

package/src/v2/components/SectionHeader/SectionHeader.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import './SectionHeader.scss';
+
+export interface SectionHeaderProps {
+    title: string;
+    className?: string;
+}
+
+export const SectionHeader: React.FC<SectionHeaderProps> = ({ title, className = '' }) => {
+    return (
+        <span className={`section-header ${className}`}>
+            {title}
+        </span>
+    );
+};

package/src/v2/components/SectionHeader/index.ts

@@ -0,0 +1,2 @@
+export { SectionHeader } from './SectionHeader';
+export type { SectionHeaderProps } from './SectionHeader';

package/src/v2/components/Select/Select.scss

@@ -69,7 +69,7 @@
 
   &--error {
     background-color: var(--surface-status-error);
-    border-color: var(--border-status-error);
+    border-color: var(--borders-status-border-error);
 
     &:hover:not(:disabled) {
       background-color: var(--errors-lighter);
@@ -77,7 +77,7 @@
     }
 
     &:focus {
-      border-color: var(--errors-dark);
+      border-color: var(--borders-status-border-error);
       background-color: var(--surface-status-error);
     }
   }
@@ -141,7 +141,7 @@
   height: 6px;
   stroke: var(--label-secondary);
   transition: all 0.2s ease-in-out;
-  
+
   .select:focus + & {
     transform: translateY(-50%) rotate(180deg);
   }
@@ -164,7 +164,7 @@
     opacity: 0.8;
     transform: scale(0.98);
     border-color: var(--cyan-700);
-    
+
     &:focus {
       transform: scale(0.98) translateY(-1px);
     }
@@ -185,4 +185,4 @@
 
 .select--filter-active {
   animation: filterPulse 0.6s ease-out;
-}
+}

package/src/v2/components/WYSIWYGEditor/Icons.tsx

@@ -0,0 +1,93 @@
+
+export const BoldIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24" fill="none">
+    <path d="M9 11.25H12.375C13.4105 11.25 14.25 10.4105 14.25 9.375C14.25 8.33947 13.4105 7.5 12.375 7.5H9V11.25ZM16.5 14.625C16.5 16.489 14.989 18 13.125 18H7.5V6H12.375C14.239 6 15.75 7.51104 15.75 9.375C15.75 10.2782 15.3952 11.0986 14.8173 11.7043C15.8234 12.2885 16.5 13.3777 16.5 14.625ZM9 12.75V16.5H13.125C14.1605 16.5 15 15.6605 15 14.625C15 13.5895 14.1605 12.75 13.125 12.75H9Z" fill="#626A90"/>
+  </svg>
+);
+
+export const ItalicIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M14.25 18H8.25V16.5H10.445L12.0319 7.5H9.75V6H15.75V7.5H13.555L11.9681 16.5H14.25V18Z" fill="#626A90"/>
+  </svg>
+);
+
+export const UnderlineIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M9 5.25V12C9 13.6568 10.3431 15 12 15C13.6568 15 15 13.6568 15 12V5.25H16.5V12C16.5 14.4853 14.4853 16.5 12 16.5C9.51472 16.5 7.5 14.4853 7.5 12V5.25H9ZM6 18H18V19.5H6V18Z" fill="#626A90"/>
+  </svg>
+);
+
+export const StrikeThroughIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M15.8653 13.5C16.0384 13.8871 16.125 14.317 16.125 14.7897C16.125 15.7969 15.7322 16.5837 14.9465 17.1503C14.1607 17.7167 13.0751 18 11.6896 18C10.4601 18 9.24251 17.7139 8.03694 17.1416V15.4507C9.17653 16.1087 10.3431 16.4377 11.5367 16.4377C13.45 16.4377 14.4096 15.8884 14.4156 14.7897C14.4156 14.3204 14.2537 13.9198 13.9298 13.588C13.9004 13.5579 13.8704 13.5286 13.8398 13.5H5.25V12H18.75V13.5H15.8653ZM12.807 11.25H8.72181C8.59245 11.1325 8.47212 11.0019 8.36082 10.8584C8.03694 10.4406 7.875 9.93419 7.875 9.33905C7.875 8.41202 8.22437 7.62375 8.92312 6.97425C9.62187 6.32474 10.703 6 12.1664 6C13.2701 6 14.3257 6.24606 15.3333 6.7382V8.35193C14.4336 7.83691 13.447 7.5794 12.3734 7.5794C10.514 7.5794 9.58438 8.16595 9.58438 9.33905C9.58438 9.65379 9.74782 9.92847 10.0747 10.1631C10.4016 10.3977 10.8049 10.5851 11.2847 10.7253C11.7499 10.8612 12.2573 11.0361 12.807 11.25Z" fill="#626A90"/>
+  </svg>
+);
+
+export const Heading1Icon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="12" viewBox="0 0 15 12" fill="none">
+    <path d="M3.3125 4.63086H6.87891V0H10.1914V12H6.87891V7.28418H3.3125V12H0V0H3.3125V4.63086ZM14.54 12H12.9717V7.96191H11.5654V6.85254H12.1152C12.9535 6.85254 13.2871 6.54609 13.2871 5.59961H14.54V12Z" fill="#626A90"/>
+  </svg>
+);
+
+export const Heading2Icon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="17" height="12" viewBox="0 0 17 12" fill="none">
+    <path d="M3.3125 4.63086H6.87891V0H10.1914V12H6.87891V7.28418H3.3125V12H0V0H3.3125V4.63086ZM14.3154 5.45605C15.8385 5.4562 16.7217 6.24039 16.7217 7.41211C16.7216 8.41248 16.2352 8.84564 15.0635 9.47656C14.0813 9.99919 13.6486 10.4133 13.6123 10.7197H16.7217V12H11.7549C11.7549 10.2603 12.3864 9.36835 13.9639 8.53906C14.8381 8.0794 15.1172 7.86234 15.1172 7.42969C15.1171 7.02416 14.8377 6.73535 14.333 6.73535C13.7651 6.73536 13.4225 7.10543 13.3594 7.77246L11.7549 7.68262C11.8631 6.27643 12.783 5.45605 14.3154 5.45605Z" fill="#626A90"/>
+  </svg>
+);
+
+export const ParagraphIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M12 7.5V18.75H10.5V15C8.01472 15 6 12.9853 6 10.5C6 8.01472 8.01472 6 10.5 6H18V7.5H15.75V18.75H14.25V7.5H12ZM10.5 7.5C8.84314 7.5 7.5 8.84314 7.5 10.5C7.5 12.1568 8.84314 13.5 10.5 13.5V7.5Z" fill="#626A90"/>
+  </svg>
+);
+
+export const BulletListIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M9 6H18.75V7.5H9V6ZM6.375 7.875C5.75368 7.875 5.25 7.37132 5.25 6.75C5.25 6.12868 5.75368 5.625 6.375 5.625C6.99632 5.625 7.5 6.12868 7.5 6.75C7.5 7.37132 6.99632 7.875 6.375 7.875ZM6.375 13.125C5.75368 13.125 5.25 12.6213 5.25 12C5.25 11.3787 5.75368 10.875 6.375 10.875C6.99632 10.875 7.5 11.3787 7.5 12C7.5 12.6213 6.99632 13.125 6.375 13.125ZM6.375 18.3C5.75368 18.3 5.25 17.7963 5.25 17.175C5.25 16.5537 5.75368 16.05 6.375 16.05C6.99632 16.05 7.5 16.5537 7.5 17.175C7.5 17.7963 6.99632 18.3 6.375 18.3ZM9 11.25H18.75V12.75H9V11.25ZM9 16.5H18.75V18H9V16.5Z" fill="#626A90"/>
+  </svg>
+);
+
+export const NumberedListIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M7.31268 5.625H6.538L5.4375 5.91988V7.08436L6.18752 6.88337L6.18763 9.375H5.25V10.5H8.25V9.375H7.31268V5.625ZM10.5 6H18.75V7.5H10.5V6ZM10.5 11.25H18.75V12.75H10.5V11.25ZM10.5 16.5H18.75V18H10.5V16.5ZM5.15625 14.7188C5.15625 13.8385 5.86979 13.125 6.75 13.125C7.63021 13.125 8.34375 13.8385 8.34375 14.7188C8.34375 15.0829 8.22137 15.419 8.0156 15.6875L8.01203 15.6922L6.9869 16.875H8.25V18H5.25009L5.24969 17.1589L7.10378 15.0262C7.17548 14.9439 7.21875 14.8366 7.21875 14.7188C7.21875 14.4599 7.00889 14.25 6.75 14.25C6.50533 14.25 6.3043 14.4376 6.2831 14.6766L6.27382 14.9062H5.15625V14.7188Z" fill="#626A90"/>
+  </svg>
+);
+
+export const QuoteAltIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M6.43756 15.9909C5.66487 15.1706 5.25 14.25 5.25 12.7578C5.25 10.1332 7.09238 7.78029 9.77294 6.61743L10.4425 7.65064C7.94103 9.00409 7.45214 10.7595 7.25673 11.8665C7.65947 11.6583 8.18669 11.585 8.70353 11.6329C10.0568 11.7584 11.1234 12.8693 11.1234 14.25C11.1234 15.6998 9.94812 16.875 8.49837 16.875C7.69357 16.875 6.92397 16.5072 6.43756 15.9909ZM13.9375 15.9909C13.1649 15.1706 12.75 14.25 12.75 12.7578C12.75 10.1332 14.5924 7.78029 17.2729 6.61743L17.9425 7.65064C15.441 9.00409 14.9522 10.7595 14.7567 11.8665C15.1594 11.6583 15.6867 11.585 16.2035 11.6329C17.5568 11.7584 18.6234 12.8693 18.6234 14.25C18.6234 15.6998 17.4481 16.875 15.9984 16.875C15.1936 16.875 14.424 16.5072 13.9375 15.9909Z" fill="#626A90"/>
+  </svg>
+);
+
+export const DividerIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <rect x="5.25" y="11.25" width="13.5" height="1.5" fill="#626A90"/>
+    <circle cx="21.75" cy="12" r="0.75" fill="#626A90" fill-opacity="0.5"/>
+    <circle cx="2.25" cy="12" r="0.75" fill="#626A90" fill-opacity="0.5"/>
+  </svg>
+);
+
+export const HardBreakIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M14.25 16.5H15.375C16.4105 16.5 17.25 15.6605 17.25 14.625C17.25 13.5895 16.4105 12.75 15.375 12.75H5.25V11.25H15.375C17.239 11.25 18.75 12.761 18.75 14.625C18.75 16.489 17.239 18 15.375 18H14.25V19.5L11.25 17.25L14.25 15V16.5ZM5.25 6H18.75V7.5H5.25V6ZM9.75 16.5V18H5.25V16.5H9.75Z" fill="#626A90"/>
+  </svg>
+)
+
+export const UndoIcon = () => (
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M6.06131 6.69136C5.88684 6.85818 5.71976 7.03357 5.56136 7.21755C5.32407 7.49319 5.10569 7.78768 4.90881 8.09936C4.77746 8.30727 4.65565 8.52287 4.54421 8.7457C4.48837 8.85736 4.43524 8.9709 4.38469 9.08613C4.2839 9.31587 4.19401 9.5527 4.11539 9.796C4.07598 9.91797 4.03914 10.0416 4.00559 10.1668C3.93079 10.446 3.87328 10.7259 3.83158 11.0051C3.82934 11.0201 3.82751 11.0351 3.82536 11.05C3.81494 11.1228 3.80597 11.1955 3.79774 11.2682C3.79428 11.2986 3.79116 11.329 3.78807 11.3594C3.78326 11.4071 3.77883 11.4547 3.77495 11.5023C3.75889 11.6978 3.75077 11.8926 3.75009 12.0865C3.75003 12.1086 3.74996 12.1307 3.75009 12.1528C3.75089 12.3012 3.75571 12.449 3.76528 12.5961C3.7665 12.6146 3.76808 12.633 3.76943 12.6514C3.82014 13.3498 3.96775 14.0309 4.20377 14.6767L7.62813 11.1377L5.45502 10.5556C5.48179 10.4557 5.51129 10.3567 5.54272 10.2594C5.66865 9.8695 5.83151 9.50078 6.02609 9.15588C6.07459 9.06992 6.12494 8.9854 6.17732 8.90245C6.91264 7.73794 8.02285 6.87449 9.29715 6.43448C9.38818 6.40305 9.48005 6.37386 9.57268 6.34679C10.1284 6.18439 10.7114 6.10131 11.3052 6.10717C11.4042 6.10814 11.5034 6.11157 11.6028 6.11753C12.0008 6.14137 12.4022 6.2058 12.8023 6.31295C13.2945 6.44483 13.7566 6.63317 14.182 6.8709C14.2125 6.88794 14.2416 6.90723 14.2718 6.92476C14.7547 7.20595 15.1899 7.54933 15.5686 7.94261C15.6449 8.02185 15.7186 8.10326 15.7902 8.18637C15.9047 8.31912 16.0139 8.45605 16.1162 8.59793C16.1915 8.70249 16.2625 8.80995 16.3309 8.91903C17.1864 10.2824 17.4949 11.9837 17.0456 13.6609C16.327 16.3424 13.9009 18.1093 11.2507 18.108V19.6078C14.5636 19.6095 17.5967 17.4016 18.4951 14.0497C19.0819 11.8595 18.6347 9.6365 17.4544 7.89634L17.4558 7.89496C17.4301 7.85706 17.4028 7.81984 17.3764 7.78241C17.3604 7.75975 17.3443 7.73721 17.3281 7.71473C17.2772 7.64435 17.2253 7.57483 17.172 7.50619C17.1543 7.48339 17.1368 7.46044 17.1188 7.43783C17.0658 7.37103 17.0112 7.30536 16.9559 7.24034C16.9336 7.21424 16.9115 7.18811 16.8889 7.16231C16.8382 7.10446 16.7867 7.04739 16.7342 6.99105C16.7045 6.95913 16.6747 6.92719 16.6444 6.89576C16.4036 6.64603 16.1448 6.41195 15.869 6.19625C15.8379 6.17193 15.8052 6.14967 15.7737 6.12582C15.715 6.08143 15.657 6.03598 15.5969 5.99323C15.5586 5.96599 15.5191 5.94038 15.4802 5.91382C15.4213 5.87363 15.3622 5.83365 15.302 5.79505C15.2644 5.7709 15.2263 5.74744 15.1881 5.72393C15.1285 5.6872 15.0687 5.65066 15.0079 5.61551C14.959 5.58729 14.9097 5.55983 14.8601 5.53265C14.8028 5.50128 14.745 5.47076 14.6868 5.44081C14.6463 5.41998 14.6055 5.39949 14.5645 5.37935C14.4883 5.3419 14.4111 5.30595 14.3332 5.27093C14.3021 5.25697 14.2713 5.24238 14.24 5.22881C14.1572 5.19297 14.0732 5.15965 13.9886 5.12661C13.953 5.11267 13.9176 5.09792 13.8816 5.08449C13.8148 5.05956 13.7471 5.03652 13.6793 5.01337C13.6344 4.99807 13.5899 4.98161 13.5446 4.9671C13.4284 4.92988 13.3102 4.89544 13.1911 4.86352C12.691 4.72957 12.1893 4.6496 11.6919 4.61976C11.4431 4.60484 11.1954 4.60237 10.9496 4.61217C10.8266 4.61706 10.7042 4.62473 10.5822 4.63564C10.3388 4.65745 10.0974 4.69064 9.85925 4.73577C8.42886 5.00676 7.10753 5.69099 6.06131 6.69136Z" fill="#626A90"/>
+</svg>
+);
+
+export const RedoIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" style={{ transform: 'scaleX(-1)' }}>
+    <path d="M6.06131 6.69136C5.88684 6.85818 5.71976 7.03357 5.56136 7.21755C5.32407 7.49319 5.10569 7.78768 4.90881 8.09936C4.77746 8.30727 4.65565 8.52287 4.54421 8.7457C4.48837 8.85736 4.43524 8.9709 4.38469 9.08613C4.2839 9.31587 4.19401 9.5527 4.11539 9.796C4.07598 9.91797 4.03914 10.0416 4.00559 10.1668C3.93079 10.446 3.87328 10.7259 3.83158 11.0051C3.82934 11.0201 3.82751 11.0351 3.82536 11.05C3.81494 11.1228 3.80597 11.1955 3.79774 11.2682C3.79428 11.2986 3.79116 11.329 3.78807 11.3594C3.78326 11.4071 3.77883 11.4547 3.77495 11.5023C3.75889 11.6978 3.75077 11.8926 3.75009 12.0865C3.75003 12.1086 3.74996 12.1307 3.75009 12.1528C3.75089 12.3012 3.75571 12.449 3.76528 12.5961C3.7665 12.6146 3.76808 12.633 3.76943 12.6514C3.82014 13.3498 3.96775 14.0309 4.20377 14.6767L7.62813 11.1377L5.45502 10.5556C5.48179 10.4557 5.51129 10.3567 5.54272 10.2594C5.66865 9.8695 5.83151 9.50078 6.02609 9.15588C6.07459 9.06992 6.12494 8.9854 6.17732 8.90245C6.91264 7.73794 8.02285 6.87449 9.29715 6.43448C9.38818 6.40305 9.48005 6.37386 9.57268 6.34679C10.1284 6.18439 10.7114 6.10131 11.3052 6.10717C11.4042 6.10814 11.5034 6.11157 11.6028 6.11753C12.0008 6.14137 12.4022 6.2058 12.8023 6.31295C13.2945 6.44483 13.7566 6.63317 14.182 6.8709C14.2125 6.88794 14.2416 6.90723 14.2718 6.92476C14.7547 7.20595 15.1899 7.54933 15.5686 7.94261C15.6449 8.02185 15.7186 8.10326 15.7902 8.18637C15.9047 8.31912 16.0139 8.45605 16.1162 8.59793C16.1915 8.70249 16.2625 8.80995 16.3309 8.91903C17.1864 10.2824 17.4949 11.9837 17.0456 13.6609C16.327 16.3424 13.9009 18.1093 11.2507 18.108V19.6078C14.5636 19.6095 17.5967 17.4016 18.4951 14.0497C19.0819 11.8595 18.6347 9.6365 17.4544 7.89634L17.4558 7.89496C17.4301 7.85706 17.4028 7.81984 17.3764 7.78241C17.3604 7.75975 17.3443 7.73721 17.3281 7.71473C17.2772 7.64435 17.2253 7.57483 17.172 7.50619C17.1543 7.48339 17.1368 7.46044 17.1188 7.43783C17.0658 7.37103 17.0112 7.30536 16.9559 7.24034C16.9336 7.21424 16.9115 7.18811 16.8889 7.16231C16.8382 7.10446 16.7867 7.04739 16.7342 6.99105C16.7045 6.95913 16.6747 6.92719 16.6444 6.89576C16.4036 6.64603 16.1448 6.41195 15.869 6.19625C15.8379 6.17193 15.8052 6.14967 15.7737 6.12582C15.715 6.08143 15.657 6.03598 15.5969 5.99323C15.5586 5.96599 15.5191 5.94038 15.4802 5.91382C15.4213 5.87363 15.3622 5.83365 15.302 5.79505C15.2644 5.7709 15.2263 5.74744 15.1881 5.72393C15.1285 5.6872 15.0687 5.65066 15.0079 5.61551C14.959 5.58729 14.9097 5.55983 14.8601 5.53265C14.8028 5.50128 14.745 5.47076 14.6868 5.44081C14.6463 5.41998 14.6055 5.39949 14.5645 5.37935C14.4883 5.3419 14.4111 5.30595 14.3332 5.27093C14.3021 5.25697 14.2713 5.24238 14.24 5.22881C14.1572 5.19297 14.0732 5.15965 13.9886 5.12661C13.953 5.11267 13.9176 5.09792 13.8816 5.08449C13.8148 5.05956 13.7471 5.03652 13.6793 5.01337C13.6344 4.99807 13.5899 4.98161 13.5446 4.9671C13.4284 4.92988 13.3102 4.89544 13.1911 4.86352C12.691 4.72957 12.1893 4.6496 11.6919 4.61976C11.4431 4.60484 11.1954 4.60237 10.9496 4.61217C10.8266 4.61706 10.7042 4.62473 10.5822 4.63564C10.3388 4.65745 10.0974 4.69064 9.85925 4.73577C8.42886 5.00676 7.10753 5.69099 6.06131 6.69136Z" fill="#626A90"/>
+  </svg>
+);
+
+export const ClearIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M12.4884 13.549L11.7035 18H10.1804L11.1935 12.2542L5.63599 6.69664L6.69664 5.63599L18.3639 17.3033L17.3032 18.3639L12.4884 13.549ZM11.8295 8.64752L12.0319 7.49995H10.6819L9.18193 5.99995H17.9999V7.49995H13.555L13.1243 9.94234L11.8295 8.64752Z" fill="#626A90"/>
+  </svg>
+);
+