@clement_lores/admin-design-system 1.0.0

package/src/atoms/check-box/check-box.tsx

@@ -0,0 +1,169 @@
+import React, { ChangeEvent, useEffect, useState } from 'react'
+import { styled, css } from '@styled-components'
+
+import focusShadowStyle from '../../utils/focus-shadow.style.js'
+import { Label } from '../label/index.js'
+
+const Icon = styled.svg`
+  fill: none;
+  stroke: white;
+  stroke-width: 2px;
+`
+
+export const CheckboxRadioContainer = styled.span`
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  & + ${Label} {
+    margin-left: ${({ theme }) => theme.space.default};
+    vertical-align: middle;
+    margin-bottom: ${({ theme }) => theme.space.sm};
+  }
+`
+
+// Hide checkbox visually but remain accessible to screen readers.
+// Source: https://polished.js.org/docs/#hidevisually
+const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })`
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`
+
+type StyledProps = {
+  checked?: boolean;
+  disabled?: boolean;
+}
+
+const checkboxBackground = (theme, checked, disabled): string => {
+  if (checked) {
+    return disabled ? theme.colors.grey40 : theme.colors.primary100
+  }
+  return 'transparent'
+}
+
+const StyledCheckbox = styled.a<StyledProps>`
+  display: inline-block;
+  width: 16px;
+  /* when it is placed within a container setting different font size */
+  font-size: 12px;
+  border: 1px solid ${({ theme, checked, disabled }): string => (checked && !disabled ? theme.colors.primary100 : theme.colors.inputBorder)};
+  height: 16px;
+  background: ${({ checked, theme, disabled }): string => checkboxBackground(theme, checked, disabled)};
+  transition: all 150ms;
+  position: relative;
+  border-radius: 2px;
+
+  ${HiddenCheckbox}:focus + & {
+    ${({ theme }) => `box-shadow: ${focusShadowStyle(theme)};`};
+  }
+  ${HiddenCheckbox}:hover + & {
+    border-color: ${({ theme }) => theme.colors.grey60};
+  }
+  ${Icon} {
+    visibility: ${(props): string => (props.checked ? 'visible' : 'hidden')};
+  }
+
+  ${({ disabled }) => (!disabled && css`
+    cursor: pointer;
+  `)}
+
+  &:after {
+    content: '';
+    position: absolute;
+    left: -5px;
+    top: -5px;
+    width: 24px;
+    height: 24px;
+    opacity: 0;
+    background: ${({ theme }) => theme.colors.primary100};
+  }
+  &:after:before {
+    opacity: 0.1;
+  }
+`
+
+export type CheckBoxProps = React.HTMLProps<HTMLInputElement>
+
+/**
+ * @typedef {object} CheckBoxProps
+ * @alias CheckBoxProps
+ * @memberof module:@adminjs/design-system.CheckBox
+ * @property {string} [...] All props default to _checkbox_ html input like `onChange`,
+ *                          `checked` etc.
+ */
+
+/**
+ * @classdesc
+ *
+ * <img src="components/checkbox.png" />
+ *
+ * HTML CheckBox
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { CheckBox, CheckBoxProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-checkbox--default StoryBook}
+ * @hideconstructor
+ * @subcategory Atoms
+ * @example
+ * return (
+ *   <Box p="xl">
+ *      <CheckBox id="checkbox1"/>
+ *      <Label inline htmlFor="checkbox1" ml="default">Some example label</Label>
+ *   </Box>
+ * )
+ * @section design-system
+ */
+const CheckBox: React.FC<CheckBoxProps> = (props) => {
+  const { className, checked, onChange, disabled, ...restProps } = props
+
+  const [isChecked, setChecked] = useState(checked ?? false)
+  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
+    if (disabled) return
+    if (onChange) {
+      onChange(event)
+    } else {
+      setChecked(!event.target.checked)
+    }
+  }
+
+  useEffect(() => {
+    setChecked(checked ?? false)
+  }, [checked])
+
+  return (
+    <CheckboxRadioContainer className={[className ?? '', 'adminjs_Checkbox'].join(' ')}>
+      <HiddenCheckbox
+        checked={isChecked}
+        onChange={handleChange}
+        // eslint-disable-next-line @typescript-eslint/ban-types
+        {...restProps as {}}
+        disabled={disabled}
+      />
+      <StyledCheckbox
+        checked={isChecked}
+        disabled={disabled}
+        onClick={(event): void => handleChange && handleChange(event as any)}
+      >
+        <Icon viewBox="0 0 24 24">
+          <polyline points="20 6 9 17 4 12" />
+        </Icon>
+      </StyledCheckbox>
+    </CheckboxRadioContainer>
+  )
+}
+
+CheckBox.displayName = 'CheckBox'
+
+export { CheckBox }
+export default CheckBox

package/src/atoms/check-box/index.ts

@@ -0,0 +1 @@
+export * from './check-box.jsx'

package/src/atoms/currency-input/currency-input.stories.tsx

@@ -0,0 +1,77 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import { FormGroup } from '../../index.js'
+import StoryWrapper from '../../utils/story-wrapper.jsx'
+import { Box, Button } from '../index.js'
+import { CurrencyInput } from './index.js'
+
+export const Default: StoryObj = {
+  render: (props) => (
+    <Box width={1}>
+      <StoryWrapper label="Currency input example">
+        <FormGroup>
+          <CurrencyInput {...props} />
+          <Button type="submit" mt="lg">Submit</Button>
+        </FormGroup>
+      </StoryWrapper>
+    </Box>
+  ),
+}
+
+export const Examples: StoryFn = () => (
+  <Box width={1}>
+    <StoryWrapper label="Euro input">
+      <CurrencyInput
+        id="input1"
+        placeholder="Simple input field..."
+        intlConfig={{ locale: 'de-DE', currency: 'EUR' }}
+      />
+    </StoryWrapper>
+  </Box>
+)
+
+const meta: Meta<typeof CurrencyInput> = {
+  title: 'DesignSystem/Atoms/CurrencyInput',
+  component: CurrencyInput,
+  args: {
+    variant: 'default',
+    borderless: false,
+    disabled: false,
+    prefix: '$',
+    suffix: '',
+    decimalSeparator: '.',
+    groupSeparator: ' ',
+    allowDecimals: true,
+    width: 1 / 2,
+    decimalsLimit: 2,
+  },
+  argTypes: {
+    variant: { options: ['sm', 'lg', 'xl', 'default'], control: { type: 'select' } },
+    borderless: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    width: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 1,
+        step: 0.1,
+      },
+    },
+    prefix: { control: { type: 'text' } },
+    suffix: { control: { type: 'text' } },
+    decimalSeparator: { control: { type: 'text' } },
+    groupSeparator: { control: { type: 'text' } },
+    allowDecimals: { control: { type: 'boolean' } },
+    decimalsLimit: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 5,
+        step: 1,
+      },
+    },
+  },
+}
+
+export default meta

package/src/atoms/currency-input/currency-input.tsx

@@ -0,0 +1,74 @@
+import { space, typography, layout, TypographyProps } from 'styled-system'
+import CurrencyInputFieldLib, {
+  CurrencyInputProps as CurrencyInputFieldProps,
+  formatValue as formatCurrencyProperty,
+} from 'react-currency-input-field'
+import { styled } from '@styled-components'
+
+import { InputCSS, InputProps } from '../input/index.js'
+import { cssClass } from '../../utils/css-class.js'
+
+const CurrencyInputField = (CurrencyInputFieldLib as any).default ?? CurrencyInputFieldLib
+const CurrencyInputComponent = CurrencyInputField.default ?? CurrencyInputField
+
+/**
+ * Prop Types of a CurrencyInput component.
+ * CurrencyInput is based on `react-currency-input-field` @see {@link https://github.com/cchanxzy/react-currency-input-field React Currency Input Field Component}
+ * It extends all {@link SpaceProps}, {@link TypographyProps} and {@link LayoutProps} and {@link https://github.com/cchanxzy/react-currency-input-field#props React Currency Input Field Component Props}
+ * @memberof CurrencyInput
+ * @alias CurrencyInputProps
+ * @property {string} [...] All props default to _currencyinput_ html component like `onChange`,
+ *                          `value` etc.
+ * @property {string} [...] Props from {@link SpaceProps}, {@link TypographyProps}
+ *                          and {@link LayoutProps} + they extend {@link InputProps}
+ */
+export type CurrencyInputProps = TypographyProps &
+  InputProps &
+  CurrencyInputFieldProps
+
+/**
+ * @classdesc
+ *
+ * <img src="components/currency-input.png" />
+ *
+ * Wrapped `currencyinput` html element.
+ *
+ * ### Usage
+ *
+ * ```ts
+ * import { CurrencyInput, CurrencyInputProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Atoms
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-currencyinput--default Storybook}
+ * @see CurrencyInputProps
+ * @hideconstructor
+ * @example
+ * return (
+ *   <Box p="xl">
+ *      <Label htmlFor="currencyinput1">Some example label</Label>
+ *      <CurrencyInput id="currencyinput1" intlConfig={{ locale: 'en-US', currency: 'GBP' }} />;
+ *   </Box>
+ * )
+ * @section design-system
+ */
+const CurrencyInput = styled(CurrencyInputComponent)<CurrencyInputProps>`
+  ${InputCSS}
+  ${space};
+  ${layout};
+  ${typography};
+
+  width: 100%;
+`
+
+CurrencyInput.defaultProps = {
+  px: 'default',
+  py: 'sm',
+  className: cssClass('CurrencyInput'),
+}
+
+CurrencyInput.displayName = 'CurrencyInput'
+
+export { CurrencyInput, formatCurrencyProperty }
+export default CurrencyInput

package/src/atoms/currency-input/index.ts

@@ -0,0 +1 @@
+export * from './currency-input.jsx'

package/src/atoms/icon/icon.stories.tsx

@@ -0,0 +1,46 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import React from 'react'
+import * as FeatherIcons from 'react-feather'
+
+import { Box, Label } from '../index.js'
+import { Icon } from './icon.js'
+
+const icons = Object.keys(FeatherIcons).filter((name) => name !== 'default')
+
+export const Default: StoryObj = {}
+
+export const Icons: StoryFn = () => (
+  <Box display="grid" style={{ gridTemplateColumns: 'repeat(10, 1fr)', gap: 16 }}>
+    {icons.map((key) => (
+      <Box key={key} flex alignItems="center" flexDirection="column">
+        <Label>{key}</Label>
+        <Icon icon={key} size={24} />
+      </Box>
+    ))}
+  </Box>
+)
+
+const meta: Meta<typeof Icon> = {
+  title: 'DesignSystem/Atoms/Icon',
+  component: Icon,
+  args: {
+    icon: icons[0],
+    size: 48,
+    rounded: false,
+    spin: false,
+  },
+  argTypes: {
+    icon: {
+      description: 'CamelCased name of an icon from https://www.npmjs.com/package/react-feather',
+      control: { type: 'select' },
+      options: icons,
+    },
+    size: { control: { type: 'number', min: 16, max: 48, step: 4 } },
+    color: { control: { type: 'color' } },
+    bg: { control: { type: 'color' } },
+    rounded: { control: { type: 'boolean' } },
+    spin: { control: { type: 'boolean' } },
+  },
+}
+
+export default meta

package/src/atoms/icon/icon.tsx

@@ -0,0 +1,155 @@
+import React from 'react'
+import * as FeatherIcons from 'react-feather'
+import {
+  SpaceProps,
+  space,
+  color as styledColor,
+  BorderRadiusProps,
+  borderRadius,
+} from 'styled-system'
+import { styled, css } from '@styled-components'
+
+import { NewColorProps as ColorProps } from '../../utils/color-props.js'
+import { cssClass } from '../../utils/css-class.js'
+
+/**
+ * Prop Types of an Icon component.
+ * Apart from props defined below it extends all {@link ColorProps} and {@link SpaceProps}
+ *
+ * @memberof Icon
+ * @alias IconProps
+ * @property {string} [...] Other props from {@link ColorProps} and {@link SpaceProps}
+ */
+export type IconProps = SpaceProps &
+  BorderRadiusProps &
+  ColorProps & {
+    /**
+     * CamelCased name of an icon from https://feathericons.com/
+     */
+    icon?: keyof typeof FeatherIcons | string
+    /**
+     * Size variant. Default to 16
+     */
+    size?: number
+    /**
+     * Icon color
+     */
+    color?: string
+    /**
+     * Icon background
+     */
+    bg?: string
+    /**
+     * If background should be rounded
+     */
+    rounded?: boolean
+
+    /**
+     * Indicates if given icons should spin
+     */
+    spin?: boolean
+  }
+
+const spinCss = css`
+  @keyframes iconSpin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  animation-name: iconSpin;
+  animation-duration: 1000ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+`
+
+const Wrapper = styled.span<IconProps>`
+  vertical-align: middle;
+  display: inline-block;
+  line-height: ${({ theme }) => theme.lineHeights.sm};
+  font-size: ${({ theme }) => theme.fontSizes.sm};
+
+  & > svg {
+    stroke: ${({ theme, color }) => (color && color !== 'inherit' ? theme.colors[color] : 'currentColor')};
+    ${({ spin }) => (spin ? spinCss : '')};
+  }
+  ${({ rounded }) => (rounded ? 'border-radius: 9999px;' : '')};
+  ${space};
+  ${styledColor};
+  ${borderRadius}
+`
+
+/**
+ * @classdesc
+ *
+ * <img src="components/icon.png" />
+ *
+ * Component wrapping [react-feather](https://www.npmjs.com/package/react-feather).
+ * List of all icons can be found here: https://feathericons.com/
+ * If you have problem verifying the key of given icon - you can always open the
+ * Chrome Terminal (with AdminJS open) and write there:
+ *
+ * ```
+ * Object.keys(window.FeatherIcons)
+ * ```
+ *
+ * to see list of all available icon keys.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Icon, IconProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Atoms
+ * @see IconProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-icon--default Storybook}
+ * @hideconstructor
+ * @example <caption>Icons inside other elements</caption>
+ * return (
+ *   <Box variant="grey">
+ *     <Label mb="default"><Icon icon="Camera" />Icon in Label</Label>
+ *     <Button><Icon icon="Camera" />Icon in button</Button>
+ *   </Box>
+ * )
+ * @example <caption>Different sizes</caption>
+ * const sizes = [16, 20, 24, 32]
+ * return (
+ *   <Box variant="grey">
+ *     {sizes.map(size => (
+ *       <Label m="default"><Icon icon="Camera" size={size}/>Icon {size}</Label>
+ *     ))}
+ *   </Box>
+ * )
+ *
+ * @example <caption>Big rounded icon with background</caption>
+ * return (
+ *   <Box variant="grey">
+ *     <Icon icon="Plus" color="white" bg="primary100" rounded size={32} p="default"/>
+ *   </Box>
+ * )
+ * @section design-system
+ */
+const Icon: React.FC<IconProps> = (props) => {
+  const { icon, size = 16, color = 'inherit', ...other } = props
+
+  if (!icon) return null
+
+  const FeatherIcon = FeatherIcons[icon] || FeatherIcons.Slash
+
+  if (FeatherIcon) {
+    return (
+      <Wrapper icon={icon} className={cssClass('Icon')} {...other} color={color}>
+        <FeatherIcon size={size} color={color} />
+      </Wrapper>
+    )
+  }
+  return null
+}
+
+export { Icon }
+export default Icon

package/src/atoms/icon/index.ts

@@ -0,0 +1 @@
+export * from './icon.jsx'

package/src/atoms/illustration/illustration.stories.tsx

@@ -0,0 +1,39 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import * as illustrations from '../illustrations/index.js'
+import { Box, Label } from '../index.js'
+import { Illustration, IllustrationProps, IllustrationVariant } from './index.js'
+
+const illustrationVariants = Object.keys(illustrations) as IllustrationVariant[]
+
+export const Default: StoryObj<IllustrationProps> = {
+  render: ({ variant }) => <Illustration variant={variant} />,
+}
+
+export const Illustrations: StoryFn = () => (
+  <Box display="grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
+    {illustrationVariants.map((key) => (
+      <Box key={key} flex alignItems="center" flexDirection="column">
+        <Label>{key}</Label>
+        <Illustration variant={key} width={150} height={150} />
+      </Box>
+    ))}
+  </Box>
+)
+
+const meta: Meta<typeof Illustration> = {
+  title: 'DesignSystem/Atoms/Illustration',
+  args: {
+    variant: illustrationVariants[0],
+    width: 150,
+    height: 150,
+  },
+  argTypes: {
+    variant: { options: illustrationVariants, control: { type: 'select' } },
+    width: { control: { type: 'number' } },
+    height: { control: { type: 'number' } },
+  },
+}
+
+export default meta

package/src/atoms/illustration/illustration.tsx

@@ -0,0 +1,84 @@
+import React, { PropsWithChildren } from 'react'
+import { styled } from '@styled-components'
+
+import { cssClass } from '../../utils/index.js'
+import * as Illustrations from '../illustrations/index.js'
+
+export type IllustrationVariant = keyof typeof Illustrations
+
+/**
+ * @memberof Illustration
+ * @alias IllustrationProps
+ */
+export type IllustrationProps = {
+  /** Available illustration variant */
+  variant: IllustrationVariant
+  /** Optional max width restrictions */
+  width?: number
+  /** Optional max height restrictions */
+  height?: number
+}
+
+const Wrapper = styled.div.attrs((props) => ({
+  className: cssClass('Illustration', props.className),
+}))`
+  [fill='#3040D6'] {
+    fill: ${({ theme }) => theme.colors.primary100};
+  }
+
+  [stroke='#3B3552'] {
+    stroke: ${({ theme }) => theme.colors.accent};
+  }
+`
+
+type RawIllustrationType = IllustrationProps & PropsWithChildren
+
+const RawIllustration: React.FC<RawIllustrationType> = (props) => {
+  const { variant, ...other } = props
+  const IllustrationComponent = Illustrations[variant]
+  return (
+    <Wrapper>
+      <IllustrationComponent {...other} />
+    </Wrapper>
+  )
+}
+
+/**
+ * @classdesc
+ *
+ * <img src="components/illustration.png" />
+ *
+ * Awesome database with all the illustrations provided with AdminJS.
+ *
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Illustration, IllustrationProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Atoms
+ * @see IllustrationProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-illustration--default Storybook}
+ * @hideconstructor
+ *
+ * @example <caption>Folders</caption>
+ * return (
+ *   <Illustration variant="Folders" />
+ * )
+ * @example <caption>DocumentSearch</caption>
+ * return (
+ *   <Illustration variant="DocumentSearch" />
+ * )
+ * @example <caption>Rocket</caption>
+ * return (
+ *   <Box bg="grey100" p="xxl"><Illustration variant="Rocket" /></Box>
+ * )
+ * @section design-system
+ */
+export const Illustration = RawIllustration
+
+Illustration.displayName = 'Illustration'
+
+export default Illustration

package/src/atoms/illustration/index.ts

@@ -0,0 +1 @@
+export * from './illustration.jsx'

package/src/atoms/illustrations/accept.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import { Props } from './props.type.js'
+
+export const Accept: React.FC<Props> = ({ width = 152, height = 152 }) => (
+  <svg width={width} height={height} viewBox="0 0 152 152" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="76" cy="76" r="76" fill="white" />
+    <circle cx="106.552" cy="54.4483" r="17.4483" fill="#3040D6" />
+    <circle cx="75.4483" cy="76.4483" r="39.4483" fill="white" stroke="#3B3552" strokeWidth="1.5" />
+    <path d="M91.3957 102.098L90.7592 102.495L91.1558 103.131L91.7924 102.735L91.3957 102.098ZM98.8131 95.5823L99.3931 96.0578L99.8686 95.4778L99.2886 95.0023L98.8131 95.5823ZM90.6025 100.825L90.2059 100.188L89.5694 100.585L89.966 101.221L90.6025 100.825ZM97.6531 94.6313L98.1286 94.0513L97.5486 93.5758L97.0731 94.1558L97.6531 94.6313ZM104.196 85.7222L104.91 85.9523V85.9523L104.196 85.7222ZM105.647 76.4492H106.397V75.6992H105.647V76.4492ZM101.435 91.8411L101.052 92.486L101.697 92.8688L102.08 92.2239L101.435 91.8411ZM100.145 91.0755L99.5001 90.6926L99.1173 91.3376L99.7623 91.7204L100.145 91.0755ZM102.768 85.262L102.054 85.0319L102.768 85.262ZM104.147 76.4492V75.6992H103.397V76.4492H104.147ZM91.7924 102.735C94.6786 100.936 97.2465 98.6763 99.3931 96.0578L98.2331 95.1068C96.1899 97.5992 93.7457 99.7502 90.9991 101.461L91.7924 102.735ZM89.966 101.221L90.7592 102.495L92.0323 101.701L91.2391 100.428L89.966 101.221ZM97.0731 94.1558C95.1332 96.5221 92.8128 98.5641 90.2059 100.188L90.9991 101.461C93.7457 99.7502 96.1899 97.5992 98.2331 95.1068L97.0731 94.1558ZM99.2886 95.0023L98.1286 94.0513L97.1776 95.2113L98.3376 96.1623L99.2886 95.0023ZM104.91 85.9523C105.876 82.9561 106.397 79.7621 106.397 76.4492H104.897C104.897 79.604 104.401 82.6429 103.482 85.4921L104.91 85.9523ZM102.08 92.2239C103.244 90.263 104.198 88.162 104.91 85.9523L103.482 85.4921C102.805 87.5939 101.897 89.5925 100.79 91.4583L102.08 92.2239ZM99.7623 91.7204L101.052 92.486L101.818 91.1961L100.528 90.4305L99.7623 91.7204ZM102.054 85.0319C101.412 87.0257 100.551 88.922 99.5001 90.6926L100.79 91.4583C101.897 89.5925 102.805 87.5939 103.482 85.4921L102.054 85.0319ZM103.397 76.4492C103.397 79.4459 102.926 82.3296 102.054 85.0319L103.482 85.4921C104.401 82.6429 104.897 79.604 104.897 76.4492H103.397ZM105.647 75.6992H104.147V77.1992H105.647V75.6992Z" fill="#3B3552" />
+    <path d="M58.3015 32.4619L59.0002 32.1893L58.7277 31.4906L58.029 31.7632L58.3015 32.4619ZM41.5051 43.6534L40.9658 43.1322L40.4446 43.6715L40.9839 44.1927L41.5051 43.6534ZM58.8467 33.8593L59.1192 34.5581L59.8179 34.2855L59.5454 33.5868L58.8467 33.8593ZM42.5837 44.6957L42.0625 45.2351L42.6018 45.7562L43.123 45.2169L42.5837 44.6957ZM36.8518 49.2761L37.2841 48.6632L36.6712 48.2309L36.2389 48.8438L36.8518 49.2761ZM31.3804 59.5114L30.6804 59.2422L30.4111 59.9422L31.1112 60.2114L31.3804 59.5114ZM38.0776 50.1406L38.6905 50.5729L39.1228 49.96L38.5099 49.5277L38.0776 50.1406ZM32.7804 60.0498L32.5112 60.7499L33.2112 61.0191L33.4804 60.3191L32.7804 60.0498ZM58.029 31.7632C51.5321 34.2976 45.7255 38.2069 40.9658 43.1322L42.0444 44.1746C46.6565 39.4021 52.2819 35.6152 58.5741 33.1606L58.029 31.7632ZM59.5454 33.5868L59.0002 32.1893L57.6028 32.7345L58.1479 34.1319L59.5454 33.5868ZM43.123 45.2169C47.5874 40.5973 53.0317 36.9328 59.1192 34.5581L58.5741 33.1606C52.2819 35.6152 46.6565 39.4021 42.0444 44.1746L43.123 45.2169ZM40.9839 44.1927L42.0625 45.2351L43.1049 44.1564L42.0263 43.114L40.9839 44.1927ZM36.2389 48.8438C33.9826 52.043 32.1076 55.5311 30.6804 59.2422L32.0804 59.7806C33.4626 56.1865 35.2788 52.8077 37.4647 49.7084L36.2389 48.8438ZM38.5099 49.5277L37.2841 48.6632L36.4196 49.889L37.6454 50.7535L38.5099 49.5277ZM33.4804 60.3191C34.8177 56.8419 36.575 53.5725 38.6905 50.5729L37.4647 49.7084C35.2788 52.8077 33.4626 56.1865 32.0804 59.7806L33.4804 60.3191ZM31.1112 60.2114L32.5112 60.7499L33.0496 59.3498L31.6496 58.8114L31.1112 60.2114Z" fill="#3B3552" />
+    <path fillRule="evenodd" clipRule="evenodd" d="M94.4566 55.3952C93.9524 52.5885 97.1355 50.5591 99.2233 52.5014C101.189 54.33 103.108 56.332 104.211 58.0528C107.613 63.3618 109.586 69.675 109.586 76.449C109.586 95.3028 94.3022 110.587 75.4484 110.587C72.1858 110.587 67.9237 109.35 64.2042 107.98C61.4858 106.979 61.9438 103.2 64.7455 102.464C66.6153 101.972 68.4144 101.416 69.7243 100.833C84.7188 94.1575 95.1725 79.1275 95.1725 61.6559C95.1725 59.9413 94.8626 57.6549 94.4566 55.3952Z" fill="#3040D6" fillOpacity="0.05" />
+    <path fillRule="evenodd" clipRule="evenodd" d="M56.3673 74.3156C58.1892 72.4984 61.1148 72.4529 62.9919 74.1793L63.1342 74.3156L70.7513 81.9134L89.2802 63.433C91.1021 61.6158 94.0277 61.5704 95.9048 63.2967L96.0471 63.433C97.869 65.2502 97.9146 68.1682 96.1838 70.0405L96.0471 70.1824L74.1353 92.0376C72.3134 93.8548 69.3878 93.9002 67.5107 92.1739L67.3684 92.0376L56.3673 81.065C54.4987 79.2012 54.4987 76.1794 56.3673 74.3156Z" fill="white" stroke="#3B3552" strokeWidth="1.5" />
+  </svg>
+)
+
+export default Accept