@infonomic/uikit 2.0.0 → 2.1.1

package/src/components/timeline/timeline.stories.tsx

@@ -0,0 +1,50 @@
+import type React from 'react'
+
+import type { Meta } from '@storybook/react-vite'
+
+import { Timeline as TimelineComponent } from './timeline.js'
+
+const meta: Meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Components',
+  component: TimelineComponent,
+}
+
+export default meta
+
+export const Timeline = (): React.JSX.Element => (
+  <div
+    style={{
+      maxWidth: '400px',
+      marginBottom: '24px',
+      display: 'flex',
+      justifyContent: 'center',
+    }}
+  >
+    <TimelineComponent>
+      <TimelineComponent.Root>
+        <TimelineComponent.Item>
+          <TimelineComponent.Icon />
+          <TimelineComponent.Heading>Website Launch</TimelineComponent.Heading>
+          <TimelineComponent.Date>September 2023</TimelineComponent.Date>
+          <TimelineComponent.Content>Some cool content here....</TimelineComponent.Content>
+        </TimelineComponent.Item>
+        <TimelineComponent.Item>
+          <TimelineComponent.Icon />
+          <TimelineComponent.Heading>Website Launch</TimelineComponent.Heading>
+          <TimelineComponent.Date>September 2023</TimelineComponent.Date>
+          <TimelineComponent.Content>Some cool content here....</TimelineComponent.Content>
+        </TimelineComponent.Item>
+        <TimelineComponent.Item>
+          <TimelineComponent.Icon />
+          <TimelineComponent.Heading>Website Launch</TimelineComponent.Heading>
+          <TimelineComponent.Date>September 2023</TimelineComponent.Date>
+          <TimelineComponent.Content>Some cool content here....</TimelineComponent.Content>
+        </TimelineComponent.Item>
+      </TimelineComponent.Root>
+    </TimelineComponent>
+  </div>
+)

package/src/components/timeline/timeline.tsx

@@ -0,0 +1,177 @@
+'use client'
+
+import type React from 'react'
+
+import cx from 'classnames'
+
+import styles from './timeline.module.css'
+
+// Timeline Container
+export interface TimelineProps {
+  id?: string
+  className?: string
+  'aria-label'?: string
+  children?: React.ReactNode
+}
+
+export const Timeline = ({
+  id,
+  className,
+  children,
+  ...rest
+}: TimelineProps): React.JSX.Element => {
+  return (
+    <div id={id} className={cx(styles.timeline, 'timeline', className)} {...rest}>
+      {children}
+    </div>
+  )
+}
+
+// Timeline Root
+type RootElement = React.ComponentRef<'ol'>
+type PrimitiveRootProps = React.ComponentPropsWithoutRef<'ol'>
+interface RootProps extends PrimitiveRootProps {
+  className?: string
+}
+const Root = function TimelineRoot({
+  ref,
+  children,
+  className,
+  ...props
+}: RootProps & {
+  ref?: React.RefObject<RootElement>
+}) {
+  const classes = cx(styles['timeline-root'], 'timeline-root', className)
+  return (
+    <ol ref={ref} {...props} className={classes}>
+      {children}
+    </ol>
+  )
+}
+
+// Timeline Item
+type ItemElement = React.ComponentRef<'li'>
+type PrimitiveItemProps = React.ComponentPropsWithoutRef<'li'>
+interface ItemProps extends PrimitiveItemProps {
+  className?: string
+}
+const Item = function TimelineItem({
+  ref,
+  children,
+  className,
+  ...props
+}: ItemProps & {
+  ref?: React.RefObject<ItemElement>
+}) {
+  return (
+    <li ref={ref} {...props} className={cx(styles['timeline-item'], 'timeline-item', className)}>
+      {children}
+    </li>
+  )
+}
+
+// Timeline Item Icon
+type IconElement = React.ComponentRef<'span'>
+type PrimitiveIconProps = React.ComponentPropsWithoutRef<'span'>
+interface IconProps extends PrimitiveIconProps {
+  className?: string
+}
+const Icon = function TimelineIcon({
+  ref,
+  children,
+  className,
+  ...props
+}: IconProps & {
+  ref?: React.RefObject<IconElement>
+}) {
+  return (
+    <span ref={ref} {...props} className={cx(styles['timeline-icon'], 'time-line-icon', className)}>
+      <svg
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+      >
+        <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
+      </svg>
+    </span>
+  )
+}
+
+// Timeline Item Heading
+type HeadingElement = React.ComponentRef<'h3'>
+type PrimitiveHeadingProps = React.ComponentPropsWithoutRef<'h3'>
+interface HeadingProps extends PrimitiveHeadingProps {
+  className?: string
+}
+const Heading = function TimelineHeading({
+  ref,
+  children,
+  className,
+  ...props
+}: HeadingProps & {
+  ref?: React.RefObject<HeadingElement>
+}) {
+  return (
+    <h3
+      ref={ref}
+      {...props}
+      className={cx(styles['timeline-heading'], 'timeline-heading', className)}
+    >
+      {children}
+    </h3>
+  )
+}
+
+// Timeline Item Date
+type DateElement = React.ComponentRef<'time'>
+type PrimitiveDateProps = React.ComponentPropsWithoutRef<'time'>
+interface DateProps extends PrimitiveDateProps {
+  className?: string
+}
+const DateItem = function TimelineDate({
+  ref,
+  children,
+  className,
+  ...props
+}: DateProps & {
+  ref?: React.RefObject<DateElement>
+}) {
+  return (
+    <time ref={ref} {...props} className={cx(styles['timeline-date'], 'timeline-date', className)}>
+      {children}
+    </time>
+  )
+}
+
+// Timeline Item Content
+type ContentElement = React.ComponentRef<'p'>
+type PrimitiveContentProps = React.ComponentPropsWithoutRef<'div'>
+interface ContentProps extends PrimitiveContentProps {
+  className?: string
+}
+const Content = function TimelineContent({
+  ref,
+  children,
+  className,
+  ...props
+}: ContentProps & {
+  ref?: React.RefObject<ContentElement>
+}) {
+  return (
+    <div
+      ref={ref}
+      {...props}
+      className={cx(styles['timeline-content'], 'timeline-content', className)}
+    >
+      {children}
+    </div>
+  )
+}
+
+Timeline.Root = Root
+Timeline.Item = Item
+Timeline.Icon = Icon
+Timeline.Heading = Heading
+Timeline.Date = DateItem
+Timeline.Content = Content

package/src/components/tooltip/tooltip.module.css

@@ -0,0 +1,55 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .tooltip {
+    font-size: 0.75rem;
+    line-height: 1;
+    color: var(--canvas-900);
+    user-select: none;
+    padding: 0.625rem 1rem;
+    border-radius: var(--border-radius-sm);
+    border-width: var(--border-width-thin);
+    border-style: var(--border-style-solid);
+    background-color: var(--gray-25);
+    border-color: var(--gray-100);
+    box-shadow: var(--shadow-xs);
+    will-change: transform, opacity;
+    animation: var(--transition-normal);
+  }
+
+  :global(.dark) {
+    .tooltip {
+      color: var(--gray-50);
+      border-color: var(--canvas-700);
+      background-color: var(--canvas-800);
+    }
+  }
+
+  .tooltip[data-state="delayed-open"][data-side="top"] :global {
+    animation-name: slideDownAndFade;
+  }
+
+  .tooltip[data-state="delayed-open"][data-side="right"] :global {
+    animation-name: slideLeftAndFade;
+  }
+
+
+  .tooltip[data-state="delayed-open"][data-side="left"] :global {
+    animation-name: slideRightAndFade;
+  }
+
+  .tooltip[data-state="delayed-open"][data-side="bottom"] :global {
+    animation-name: slideUpAndFade;
+
+  }
+
+  .tooltip-arrow {
+    fill: var(--gray-100)
+  }
+
+  :global(.dark) {
+    .tooltip-arrow {
+      fill: var(--canvas-700);
+    }
+  }
+}

package/src/components/tooltip/tooltip.stories.tsx

@@ -0,0 +1,59 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type React from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Button } from '../button/button.js'
+import { Tooltip as TooltipComponent } from './tooltip.js'
+
+export const Tooltip = (): React.JSX.Element => {
+  return (
+    <>
+      <div
+        style={{
+          maxWidth: '100px',
+          marginLeft: '12rem',
+          marginTop: '3rem',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '46px',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '16px',
+        }}
+      >
+        <TooltipComponent text="I'm a tooltip" side="top" sideOffset={5}>
+          <Button fullWidth={true} size="sm">
+            Top
+          </Button>
+        </TooltipComponent>
+        <TooltipComponent text="I'm a tooltip" side="left" sideOffset={5}>
+          <Button fullWidth={true} size="sm">
+            Left
+          </Button>
+        </TooltipComponent>
+        <TooltipComponent text="I'm a tooltip" side="right" sideOffset={5}>
+          <Button fullWidth={true} size="sm">
+            Right
+          </Button>
+        </TooltipComponent>
+        <TooltipComponent text="I'm a tooltip" side="bottom" sideOffset={5}>
+          <Button fullWidth={true} size="sm">
+            Bottom
+          </Button>
+        </TooltipComponent>
+      </div>
+    </>
+  )
+}
+
+const meta: Meta<typeof TooltipComponent> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Components',
+  component: TooltipComponent,
+}
+
+export default meta

package/src/components/tooltip/tooltip.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { Tooltip as TooltipPrimitive } from 'radix-ui'
+import type React from 'react'
+
+type TooltipIntrinsicProps = React.JSX.IntrinsicElements['div']
+export interface TooltipProps extends TooltipIntrinsicProps {
+  text: string
+  delay?: number
+  side?: 'bottom' | 'top' | 'right' | 'left' | undefined
+  sideOffset?: number
+  disableHoverableContent?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+import styles from './tooltip.module.css'
+
+export const Tooltip = function Tooltip({
+  ref,
+  text,
+  delay = 500,
+  side = 'top',
+  sideOffset = 0,
+  disableHoverableContent,
+  open,
+  onOpenChange,
+  children,
+}: TooltipProps & {
+  ref?: React.RefObject<HTMLDivElement>
+}): React.JSX.Element {
+  return (
+    <TooltipPrimitive.Provider
+      delayDuration={delay}
+      disableHoverableContent={disableHoverableContent}
+    >
+      <TooltipPrimitive.Root open={open} onOpenChange={onOpenChange}>
+        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Content
+          ref={ref}
+          side={side}
+          sideOffset={sideOffset}
+          className={styles.tooltip}
+        >
+          {text}
+          <TooltipPrimitive.Arrow className={styles['tooltip-arrow']} />
+        </TooltipPrimitive.Content>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  )
+}

package/src/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const classes: { [key: string]: string }
+  export default classes
+}

package/src/hooks/use-media-query.ts

@@ -0,0 +1,20 @@
+import React, { useEffect, useState } from 'react'
+
+export const useMediaQuery = (query: string): boolean | null => {
+  const [matches, setMatches] = useState<boolean | null>(null)
+  useEffect(() => {
+    const mediaMatch = window.matchMedia(query)
+    if (matches == null) {
+      setMatches(mediaMatch.matches)
+    }
+    const handler = (e: MediaQueryListEvent): void => {
+      setMatches(e.matches)
+    }
+    mediaMatch.addEventListener('change', handler)
+    return () => {
+      mediaMatch.removeEventListener('change', handler)
+    }
+  }, [matches, query])
+
+  return matches
+}

package/src/icons/activity-icon.tsx

@@ -0,0 +1,40 @@
+import cx from 'classnames'
+import type React from 'react'
+
+import { IconElement } from './icon-element.js'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const ActivityIcon = ({
+  className,
+  svgClassName,
+  ...rest
+}: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-none'], styles['stroke-contrast'], svgClassName)
+
+  return (
+    <IconElement className={cx('activity-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.75}
+      >
+        <path d="M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4" />
+        <path d="M2 6h4" />
+        <path d="M2 10h4" />
+        <path d="M2 14h4" />
+        <path d="M2 18h4" />
+        <path d="M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z" />
+      </svg>
+    </IconElement>
+  )
+}
+
+ActivityIcon.displayName = 'ActivityIcon'

package/src/icons/calendar-icon.tsx

@@ -0,0 +1,39 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+
+import type { IconProps } from './types/icon.js'
+
+import styles from './icons.module.css'
+
+export const CalendarIcon = ({
+  className,
+  svgClassName,
+  ...rest
+}: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-contrast'], svgClassName)
+
+  return (
+    <IconElement className={cx('calendar-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 15 15"
+        strokeWidth="0"
+      >
+        <path
+          d="M4.5 1C4.77614 1 5 1.22386 5 1.5V2H10V1.5C10 1.22386 10.2239 1 10.5 1C10.7761 1 11 1.22386 11 1.5V2H12.5C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H2.5C1.67157 14 1 13.3284 1 12.5V3.5C1 2.67157 1.67157 2 2.5 2H4V1.5C4 1.22386 4.22386 1 4.5 1ZM10 3V3.5C10 3.77614 10.2239 4 10.5 4C10.7761 4 11 3.77614 11 3.5V3H12.5C12.7761 3 13 3.22386 13 3.5V5H2V3.5C2 3.22386 2.22386 3 2.5 3H4V3.5C4 3.77614 4.22386 4 4.5 4C4.77614 4 5 3.77614 5 3.5V3H10ZM2 6V12.5C2 12.7761 2.22386 13 2.5 13H12.5C12.7761 13 13 12.7761 13 12.5V6H2ZM7 7.5C7 7.22386 7.22386 7 7.5 7C7.77614 7 8 7.22386 8 7.5C8 7.77614 7.77614 8 7.5 8C7.22386 8 7 7.77614 7 7.5ZM9.5 7C9.22386 7 9 7.22386 9 7.5C9 7.77614 9.22386 8 9.5 8C9.77614 8 10 7.77614 10 7.5C10 7.22386 9.77614 7 9.5 7ZM11 7.5C11 7.22386 11.2239 7 11.5 7C11.7761 7 12 7.22386 12 7.5C12 7.77614 11.7761 8 11.5 8C11.2239 8 11 7.77614 11 7.5ZM11.5 9C11.2239 9 11 9.22386 11 9.5C11 9.77614 11.2239 10 11.5 10C11.7761 10 12 9.77614 12 9.5C12 9.22386 11.7761 9 11.5 9ZM9 9.5C9 9.22386 9.22386 9 9.5 9C9.77614 9 10 9.22386 10 9.5C10 9.77614 9.77614 10 9.5 10C9.22386 10 9 9.77614 9 9.5ZM7.5 9C7.22386 9 7 9.22386 7 9.5C7 9.77614 7.22386 10 7.5 10C7.77614 10 8 9.77614 8 9.5C8 9.22386 7.77614 9 7.5 9ZM5 9.5C5 9.22386 5.22386 9 5.5 9C5.77614 9 6 9.22386 6 9.5C6 9.77614 5.77614 10 5.5 10C5.22386 10 5 9.77614 5 9.5ZM3.5 9C3.22386 9 3 9.22386 3 9.5C3 9.77614 3.22386 10 3.5 10C3.77614 10 4 9.77614 4 9.5C4 9.22386 3.77614 9 3.5 9ZM3 11.5C3 11.2239 3.22386 11 3.5 11C3.77614 11 4 11.2239 4 11.5C4 11.7761 3.77614 12 3.5 12C3.22386 12 3 11.7761 3 11.5ZM5.5 11C5.22386 11 5 11.2239 5 11.5C5 11.7761 5.22386 12 5.5 12C5.77614 12 6 11.7761 6 11.5C6 11.2239 5.77614 11 5.5 11ZM7 11.5C7 11.2239 7.22386 11 7.5 11C7.77614 11 8 11.2239 8 11.5C8 11.7761 7.77614 12 7.5 12C7.22386 12 7 11.7761 7 11.5ZM9.5 11C9.22386 11 9 11.2239 9 11.5C9 11.7761 9.22386 12 9.5 12C9.77614 12 10 11.7761 10 11.5C10 11.2239 9.77614 11 9.5 11Z"
+          // fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        />
+      </svg>
+    </IconElement>
+  )
+}
+
+CalendarIcon.displayName = 'Calendar'

package/src/icons/check-icon.tsx

@@ -0,0 +1,33 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+
+import type { IconProps } from './types/icon.js'
+
+import styles from './icons.module.css'
+
+export const CheckIcon = ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-contrast'], svgClassName)
+
+  return (
+    <IconElement className={cx('check-icon', className)} {...rest}>
+      <svg
+        className={applied}
+        xmlns="http://www.w3.org/2000/svg"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 15 15"
+      >
+        <path
+          d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        />
+      </svg>
+    </IconElement>
+  )
+}
+
+CheckIcon.displayName = 'CheckIcon'

package/src/icons/chevron-down-icon.tsx

@@ -0,0 +1,39 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+
+import type { IconProps } from './types/icon.js'
+
+import styles from './icons.module.css'
+
+export const ChevronDownIcon = ({
+  className,
+  svgClassName,
+  ...rest
+}: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-contrast'], svgClassName)
+
+  return (
+    <IconElement className={cx('chevron-down-icon', className)} {...rest}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className={applied}
+        role="presentation"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 15 15"
+        strokeWidth={2}
+      >
+        <path
+          d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+    </IconElement>
+  )
+}
+
+ChevronDownIcon.displayName = 'ChevronDownIcon'

package/src/icons/chevron-left-double-icon.tsx

@@ -0,0 +1,58 @@
+/**
+ * Byline CMS
+ *
+ * Copyright © 2025 Anthony Bouch and contributors.
+ *
+ * This file is part of Byline CMS.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import cx from 'classnames'
+import type React from 'react'
+
+import { IconElement } from './icon-element.jsx'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const ChevronLeftDoubleIcon = ({
+  className,
+  svgClassName,
+  ...rest
+}: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-contrast'], svgClassName)
+
+  return (
+    <IconElement className={cx('chevron-left-double-icon', className)} {...rest}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className={applied}
+        role="presentation"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 15 15"
+        strokeWidth={1}
+      >
+        <path
+          d="M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z"
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+    </IconElement>
+  )
+}
+
+ChevronLeftDoubleIcon.displayName = 'ChevronLeftDoubleIcon'