@okam/stack-ui 1.25.2 → 1.25.3

package/src/components/fields/TextArea/textArea.stories.mdx

@@ -0,0 +1,60 @@
+{/* TextArea.stories.mdx */}
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import TextArea from './index'
+
+<Meta
+  title="Form/Fields/Textarea"
+  component={TextArea}
+  parameters={{
+    layout: 'fullscreen',
+  }}
+  args={{
+    id: '',
+    name: 'name',
+    label: 'First name',
+    placeholder: 'Message',
+    required: true,
+    disabled: false,
+    isError: false,
+    ariaLabel: 'Message',
+  }}
+/>
+
+export const Template = (args) => {
+  const { backgroundColor, ...rest } = args
+  return (
+    <div className={`flex flex-col m-auto h-screen justify-center items-center`}>
+      <TextArea {...rest} />
+    </div>
+  )
+}
+
+# Text Input Field
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Disabled"
+    args={{
+      disabled: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Error"
+    args={{
+      errorMessage: 'This is an error message',
+      isError: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/src/components/fields/TextInputField/index.tsx

@@ -0,0 +1,107 @@
+'use client'
+
+import { FocusRing } from '@react-aria/focus'
+import { useRef } from 'react'
+import { useTextField } from 'react-aria'
+import { get, useFormContext } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import useThemeContext from '../../../providers/Theme/hooks'
+import Typography from '../../Typography'
+import type { TTextInputProps, TUseTextFieldInputProps } from './interface'
+
+const TextInputField = (props: TTextInputProps) => {
+  const {
+    label,
+    isRequired = false,
+    isDisabled = false,
+    required,
+    disabled,
+    errorMessage,
+    fieldRef,
+    children,
+    themeName = 'textInput',
+    tokens,
+    customTheme,
+    ariaLabel,
+  } = props
+
+  const legacyRequired = required ?? isRequired
+  const legacyDisabled = disabled ?? isDisabled
+
+  const ref = useRef<HTMLInputElement | null>(null)
+  // inputProps will be cast to TUseTextFieldInputProps
+  // so you should only use useTextField<'input'>
+  const { errorMessageProps, inputProps, labelProps } = useTextField<'input'>(
+    { 'aria-label': ariaLabel, ...props, isRequired: legacyRequired, isDisabled: legacyDisabled },
+    ref,
+  )
+
+  const { 'aria-labelledby': inputPropsAriaLabelledBy, ...accessibleInputProps } = {
+    ...(inputProps as TUseTextFieldInputProps),
+    required: legacyRequired,
+    disabled: legacyDisabled,
+  }
+
+  const inputTokens = { ...tokens, isDisabled, isRequired, isError: !!errorMessage }
+
+  const wrapper = useThemeContext(`${themeName}.wrapper`, inputTokens, customTheme)
+  const labelTheme = useThemeContext(`${themeName}.label`, inputTokens, customTheme)
+  const input = useThemeContext(`${themeName}.input`, inputTokens, customTheme)
+  const container = useThemeContext(`${themeName}.container`, inputTokens, customTheme)
+
+  return (
+    <div>
+      <FocusRing focusRingClass="has-focus-ring" within>
+        <div aria-disabled={isDisabled} className={wrapper}>
+          {label && (
+            // eslint-disable-next-line jsx-a11y/label-has-associated-control
+            <label className={labelTheme} {...labelProps}>
+              {label}
+            </label>
+          )}
+          <div className={container}>
+            {children}
+
+            <input
+              {...accessibleInputProps}
+              className={input}
+              ref={(e) => {
+                fieldRef?.(e)
+                ref.current = e
+              }}
+            />
+          </div>
+        </div>
+      </FocusRing>
+      {errorMessage && (
+        <Typography themeName={`${themeName}.errorMessage`} tokens={inputTokens} {...errorMessageProps}>
+          {errorMessage}
+        </Typography>
+      )}
+    </div>
+  )
+}
+
+export const ReactHookFormInput = (props: TTextInputProps) => {
+  const { name, required, isRequired, minLength = 0, maxLength = 99999999, validation } = props
+  const { register, formState } = useFormContext()
+  const error: Error = get(formState.errors, name)
+  const errMsg = error?.message ?? undefined
+  const { t } = useTranslation('components')
+  const { ref: refCallback, ...rest } = register(name, {
+    required: required ?? isRequired ? t('FORM.ERROR.REQUIRED') ?? 'required' : false,
+    minLength: {
+      value: minLength,
+      message: t('FORM.ERROR.MIN_LENGTH', { length: minLength }),
+    },
+    maxLength: {
+      value: maxLength,
+      message: t('FORM.ERROR.MAX_LENGTH', { length: minLength }),
+    },
+    ...validation,
+  })
+
+  return <TextInputField fieldRef={refCallback} {...rest} {...props} errorMessage={errMsg} />
+}
+
+export default TextInputField

package/src/components/fields/TextInputField/interface.ts

@@ -0,0 +1,30 @@
+import type { InputHTMLAttributes } from 'react'
+import type { AriaTextFieldOptions } from 'react-aria'
+import type { RefCallBack } from 'react-hook-form'
+import type { TDefaultComponent, TReactHookForm } from '../../../types/components'
+
+export type TFieldReactHookForm = TDefaultComponent & TReactHookForm
+
+export interface TTextInputProps
+  extends TFieldReactHookForm,
+    Omit<AriaTextFieldOptions<'input'>, 'onChange' | 'onBlur'> {
+  name: string
+  ariaLabel?: string
+  errorMessage?: string
+  fieldRef?: RefCallBack
+  /**
+   * @deprecated use isRequired instead
+   */
+  required?: boolean
+  /**
+   * @deprecated use isDisabled instead
+   */
+  disabled?: boolean
+  /**
+   * @deprecated depends on errorMEssage
+   */
+  isError?: boolean
+}
+
+// @see https://react-spectrum.adobe.com/react-aria/useTextField.html
+export type TUseTextFieldInputProps = InputHTMLAttributes<HTMLInputElement>

package/src/components/fields/TextInputField/text-input-field.stories.mdx

@@ -0,0 +1,64 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import TextInputField from './index'
+
+<Meta
+  title="Form/Fields/Text Input"
+  component={TextInputField}
+  args={{
+    id: '',
+    label: 'First Name',
+    name: 'name',
+    placeholder: 'Your name here',
+    isDisabled: false,
+    isError: false,
+    ariaLabel: 'First name',
+    icon: 'ArrowRight',
+    onChange: (value) => console.log(`Value is now ${value}`),
+    onBlur: (e) => console.log(`Value was ${e.target.value} when the field was blurred`)
+  }}
+/>
+
+export const Template = (args) => {
+  const { backgroundColor, ...rest } = args
+  return (
+    <div className={`flex flex-col m-auto justify-center items-center`}>
+      <TextInputField {...rest} />
+    </div>
+  )
+}
+
+# Text Input Field
+
+<Canvas>
+  <Story 
+    name="Default"
+    args={{
+      isRequired: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Disabled"
+    args={{
+      isDisabled: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Error"
+    args={{
+      errorMessage: 'This is an error message',
+      isError: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/src/components/icons/ArrowDown.tsx

@@ -0,0 +1,11 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M17.728 13.66 12.388 19 7.05 13.66M12.4 5v14" stroke="currentColor" />
+  </svg>
+)
+
+const ArrowDown = memo(SvgComponent, isEqual)
+export default ArrowDown

package/src/components/icons/ArrowLeft.tsx

@@ -0,0 +1,18 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <g>
+      <path d="M.075 11.622a1 1 0 0 0 0 .76 1 1 0 0 0 .21.33l8 8a1.004 1.004 0 0 0 1.42-1.42l-6.3-6.29h19.59a1 1 0 0 0 0-2H3.405l6.3-6.29a1 1 0 0 0 0-1.42 1 1 0 0 0-1.42 0l-8 8a1 1 0 0 0-.21.33Z" />
+    </g>
+    <defs>
+      <clipPath>
+        <path fill="currentColor" d="M0 0h24v24H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+const ArrowLeft = memo(SvgComponent, isEqual)
+export default ArrowLeft

package/src/components/icons/ArrowRight.tsx

@@ -0,0 +1,18 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <g>
+      <path d="M23.92 12.38a1 1 0 0 0 0-.76 1 1 0 0 0-.21-.33l-8-8a1.003 1.003 0 1 0-1.42 1.42l6.3 6.29H1a1 1 0 1 0 0 2h19.59l-6.3 6.29a1 1 0 0 0 0 1.42 1.002 1.002 0 0 0 1.42 0l8-8c.091-.095.162-.207.21-.33Z" />
+    </g>
+    <defs>
+      <clipPath>
+        <path fill="currentColor" d="M0 0h24v24H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+const ArrowRight = memo(SvgComponent, isEqual)
+export default ArrowRight

package/src/components/icons/Check.tsx

@@ -0,0 +1,11 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" height={48} width={48} fill="currentColor" viewBox="0 0 48 48" {...props}>
+    <path d="M21.05 33.1 35.2 18.95l-2.3-2.25-11.85 11.85-6-6-2.25 2.25ZM24 44q-4.1 0-7.75-1.575-3.65-1.575-6.375-4.3-2.725-2.725-4.3-6.375Q4 28.1 4 24q0-4.15 1.575-7.8 1.575-3.65 4.3-6.35 2.725-2.7 6.375-4.275Q19.9 4 24 4q4.15 0 7.8 1.575 3.65 1.575 6.35 4.275 2.7 2.7 4.275 6.35Q44 19.85 44 24q0 4.1-1.575 7.75-1.575 3.65-4.275 6.375t-6.35 4.3Q28.15 44 24 44Z" />
+  </svg>
+)
+
+const Check = memo(SvgComponent, isEqual)
+export default Check

package/src/components/icons/ChevronLeft.tsx

@@ -0,0 +1,11 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" fill="currentColor" {...props}>
+    <path d="M28.05 36 16 23.95 28.05 11.9l2.15 2.15-9.9 9.9 9.9 9.9Z" />
+  </svg>
+)
+
+const ChevronLeft = memo(SvgComponent, isEqual)
+export default ChevronLeft

package/src/components/icons/ChevronRight.tsx

@@ -0,0 +1,11 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" fill="currentColor" {...props}>
+    <path d="m18.75 36-2.15-2.15 9.9-9.9-9.9-9.9 2.15-2.15L30.8 23.95Z" />
+  </svg>
+)
+
+const ChevronRight = memo(SvgComponent, isEqual)
+export default ChevronRight

package/src/components/icons/CloseBtn.tsx

@@ -0,0 +1,11 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" d="M18 6 6 18M6 6l12 12" />
+  </svg>
+)
+
+const CloseBtn = memo(SvgComponent, isEqual)
+export default CloseBtn

package/src/components/icons/Facebook.tsx

@@ -0,0 +1,14 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      d="M9.161 5.889v2.753H7V12h2.161v10h4.442V12h2.977s.28-1.614.417-3.38h-3.379V6.316a.963.963 0 0 1 .332-.558c.174-.146.396-.233.63-.248H17V2h-3.275C9.063 2 9.173 5.37 9.173 5.889h-.012Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+const Facebook = memo(SvgComponent, isEqual)
+export default Facebook

package/src/components/icons/FacebookColored.tsx

@@ -0,0 +1,16 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 256 256" {...props}>
+    <path
+      fill="#3b5998"
+      strokeMiterlimit="10"
+      strokeWidth="0"
+      d="M147.5 254.3V139.1h38.7l6-45h-44.7V65.2c0-13 3.6-21.9 22.3-21.9h23.7V3.2c-11.6-1.2-23.1-1.8-34.7-1.8-34.3 0-57.8 20.9-57.8 59.4V94H62.2v45.1H101v115.2h46.5z"
+    />
+  </svg>
+)
+
+const FacebookColored = memo(SvgComponent, isEqual)
+export default FacebookColored

package/src/components/icons/FacebookRounded.tsx

@@ -0,0 +1,16 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={25} viewBox="0 0 24 25" fill="none" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2 12.5001C2 17.4501 5.6 21.5501 10.35 22.4001L10.4094 22.3515C10.4063 22.3509 10.4032 22.3503 10.4001 22.3498V15.2998H7.90015V12.4998H10.4001V10.2998C10.4001 7.79978 12.0001 6.39978 14.3001 6.39978C15.0001 6.39978 15.8001 6.49978 16.5001 6.59978V9.14978H15.2001C14.0001 9.14978 13.7001 9.74978 13.7001 10.5498V12.4998H16.3501L15.9001 15.2998H13.7001V22.3498C13.6696 22.3553 13.639 22.3608 13.6084 22.366L13.65 22.4001C18.4 21.5501 22 17.4501 22 12.5001C22 7.00006 17.5 2.50006 12 2.50006C6.5 2.50006 2 7.00006 2 12.5001Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+const FacebookRounded = memo(SvgComponent, isEqual)
+export default FacebookRounded

package/src/components/icons/Globe.tsx

@@ -0,0 +1,38 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width="40" height="40" viewBox="0 0 67 67" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M16.1339 8.5415C18.1397 10.0645 19.8152 11.9792 21.0587 14.1693C22.2848 16.2537 25.064 22.0491 22.5341 25.3227C19.6732 29.0215 11.3848 30.2721 11.3848 33.6807C11.3848 36.2473 15.0181 39.1736 16.9594 42.0386C18.0736 43.6842 18.6691 45.626 18.6691 47.6133C18.6691 49.6006 18.0736 51.5423 16.9594 53.1879C16.0541 54.6088 14.817 55.7884 13.3547 56.6251"
+      stroke="currentColor"
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M57.8289 14.8058C52.7905 17.106 47.4837 18.766 42.0327 19.747C39.1227 19.9555 38.6895 17.5605 36.4621 14.1724C34.7905 11.6302 30.8874 8.45055 30.8874 5.81443C30.8648 4.90303 30.9876 3.99386 31.2511 3.12109"
+      stroke="currentColor"
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M33.6799 64.3334C50.6088 64.3334 64.3324 50.6098 64.3324 33.6809C64.3324 16.7519 50.6088 3.02832 33.6799 3.02832C16.751 3.02832 3.02734 16.7519 3.02734 33.6809C3.02734 50.6098 16.751 64.3334 33.6799 64.3334Z"
+      stroke="currentColor"
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M53.2225 36.1983C53.341 44.781 42.1549 55.5094 36.4658 53.188C31.4796 51.1445 34.9944 47.2291 33.7193 36.1983C33.188 31.6127 38.0842 27.8404 43.4872 27.8404C45.8806 27.6839 48.24 28.4711 50.0597 30.0335C51.8795 31.5958 53.2225 32.8948 53.2225 36.1983Z"
+      stroke="currentColor"
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+const Globe = memo(SvgComponent, isEqual)
+export default Globe

package/src/components/icons/IconFallback.tsx

@@ -0,0 +1,8 @@
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" height={48} width={48} fill="currentColor" {...props} />
+)
+
+const Fallback = memo(SvgComponent)
+export default Fallback

package/src/components/icons/Instagram.tsx

@@ -0,0 +1,14 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 256 256" {...props}>
+    <g fill="currentColor" strokeMiterlimit="10" strokeWidth="0">
+      <path d="M253.5 75.7a92.8 92.8 0 0 0-5.8-30.7A62 62 0 0 0 233 22.6 62 62 0 0 0 210.7 8c-8-3-17.2-5.2-30.7-5.8-13.5-.6-17.8-.8-52.1-.8s-38.7.2-52.2.8A92.8 92.8 0 0 0 45 8c-8.4 3.2-16 8.2-22.4 14.6A62 62 0 0 0 8 45c-3 8-5.2 17.3-5.8 30.7a890 890 0 0 0-.8 52.2c0 34.3.2 38.6.8 52.1A92.8 92.8 0 0 0 8 210.7a62 62 0 0 0 14.5 22.4A62 62 0 0 0 45 247.7c8 3.1 17.3 5.2 30.7 5.9 13.5.6 17.8.7 52.2.7s38.6-.1 52-.7a92.8 92.8 0 0 0 30.8-6c17-6.5 30.4-20 37-36.9 3-8 5.2-17.2 5.8-30.7.7-13.5.8-17.8.8-52.1s-.1-38.7-.8-52.2zM230.8 179c-.6 12.3-2.6 19-4.4 23.4-4.2 11-13 19.8-24 24a69.9 69.9 0 0 1-23.4 4.4c-13.4.6-17.4.7-51.1.7-33.8 0-37.8-.1-51.1-.7-12.4-.6-19-2.6-23.5-4.4-5.5-2-10.5-5.2-14.5-9.4-4.2-4.1-7.5-9-9.5-14.6a69.9 69.9 0 0 1-4.4-23.4c-.6-13.4-.7-17.4-.7-51.1s.1-37.8.7-51.1c.6-12.4 2.6-19 4.4-23.5 2-5.5 5.2-10.5 9.4-14.6 4.1-4.2 9-7.4 14.6-9.4a69.9 69.9 0 0 1 23.5-4.4c13.3-.6 17.3-.7 51-.7 33.8 0 37.8.1 51.1.7 12.4.6 19 2.7 23.5 4.4 5.5 2 10.5 5.2 14.6 9.4 4.2 4.1 7.4 9.1 9.4 14.6a69.9 69.9 0 0 1 4.4 23.5c.6 13.3.7 17.3.7 51s-.1 37.8-.7 51.2z" />
+      <path d="M127.9 63a65 65 0 1 0 0 129.8 65 65 0 0 0 0-129.9zm0 107a42.2 42.2 0 1 1 0-84.3 42.2 42.2 0 0 1 0 84.3zM210.5 60.4a15.2 15.2 0 1 1-30.3 0 15.2 15.2 0 0 1 30.3 0z" />
+    </g>
+  </svg>
+)
+
+const Instagram = memo(SvgComponent, isEqual)
+export default Instagram

package/src/components/icons/InstagramColored.tsx

@@ -0,0 +1,59 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 256 256" {...props}>
+    <g fill="none" strokeMiterlimit="10" strokeWidth="0" transform="matrix(2.8 0 0 2.8 1.4 1.4)">
+      <linearGradient
+        id="a"
+        x1="7.6"
+        x2="82.4"
+        y1="9.6"
+        y2="84.4"
+        gradientTransform="matrix(1 0 0 -1 0 92)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0%" stopColor="#ffd600" />
+        <stop offset="50%" stopColor="#ff0100" />
+        <stop offset="100%" stopColor="#d800b9" />
+      </linearGradient>
+      <path
+        fill="url(#a)"
+        d="M89.7 26.4c-.2-4.7-1-8-2-10.9a22 22 0 0 0-5.3-8 22 22 0 0 0-8-5.1A33 33 0 0 0 63.7.3C58.8 0 57.2 0 45 0S31.2 0 26.4.3c-4.7.2-8 1-10.9 2a22 22 0 0 0-8 5.3 22 22 0 0 0-5.1 8A33 33 0 0 0 .3 26.3C0 31.2 0 32.8 0 45c0 12.2 0 13.8.3 18.6.2 4.7 1 8 2 10.9a22 22 0 0 0 5.3 8c2.2 2.2 5 4 8 5.1a33 33 0 0 0 10.8 2.1c4.8.2 6.4.3 18.6.3s13.8 0 18.6-.3c4.7-.2 8-1 10.9-2a23 23 0 0 0 13.1-13.2 33 33 0 0 0 2.1-11c.2-4.7.3-6.3.3-18.5s0-13.8-.3-18.6zm-8 36.8c-.3 4.4-1 6.8-1.6 8.3-1.5 4-4.6 7-8.6 8.6-1.5.6-4 1.3-8.3 1.5-4.8.2-6.2.3-18.2.3s-13.4 0-18.2-.3a25 25 0 0 1-8.3-1.5 14 14 0 0 1-5.2-3.4 14 14 0 0 1-3.4-5.2c-.6-1.5-1.3-4-1.5-8.3A313 313 0 0 1 8 45c0-12 0-13.4.3-18.2a25 25 0 0 1 1.5-8.3 14 14 0 0 1 3.4-5.2 14 14 0 0 1 5.2-3.4c1.5-.6 4-1.3 8.3-1.5C31.6 8.2 33 8 45 8s13.4 0 18.2.3c4.4.2 6.8.9 8.3 1.5a14 14 0 0 1 5.2 3.4 14 14 0 0 1 3.4 5.2c.6 1.5 1.3 4 1.5 8.3.2 4.8.3 6.2.3 18.2s0 13.4-.3 18.2z"
+      />
+      <linearGradient
+        id="b"
+        x1="28.7"
+        x2="61.3"
+        y1="30.7"
+        y2="63.3"
+        gradientTransform="matrix(1 0 0 -1 0 92)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0%" stopColor="#ff6400" />
+        <stop offset="50%" stopColor="#ff0100" />
+        <stop offset="100%" stopColor="#fd0056" />
+      </linearGradient>
+      <path
+        fill="url(#b)"
+        d="M45 21.9A23.1 23.1 0 1 0 45 68 23.1 23.1 0 0 0 45 22zM45 60a15 15 0 1 1 0-30 15 15 0 0 1 0 30z"
+      />
+      <linearGradient
+        id="c"
+        x1="65.2"
+        x2="72.8"
+        y1="67.2"
+        y2="74.8"
+        gradientTransform="matrix(1 0 0 -1 0 92)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0%" stopColor="#f30072" />
+        <stop offset="100%" stopColor="#e50097" />
+      </linearGradient>
+      <path fill="url(#c)" d="M74.4 21a5.4 5.4 0 1 1-10.8 0 5.4 5.4 0 0 1 10.8 0z" />
+    </g>
+  </svg>
+)
+
+const InstagramColored = memo(SvgComponent, isEqual)
+export default InstagramColored

package/src/components/icons/Link.tsx

@@ -0,0 +1,14 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 256 256" {...props}>
+    <g fill="currentColor" strokeMiterlimit="10" strokeWidth="0">
+      <path d="M61.4 254.3A59.8 59.8 0 0 1 19 151.8L65.8 105a11.2 11.2 0 0 1 15.9 16l-46.8 46.7a37.3 37.3 0 0 0 0 53.1 37.6 37.6 0 0 0 53 0l46.9-46.8a11.2 11.2 0 1 1 15.9 16l-46.8 46.7a59.8 59.8 0 0 1-42.5 17.6zM182 154a11.2 11.2 0 0 1-8-19.2L220.8 88a37.6 37.6 0 0 0-53-53.1l-46.9 46.8a11.2 11.2 0 0 1-15.9-16L151.8 19a59.6 59.6 0 0 1 85 0 60.1 60.1 0 0 1 0 84.9l-46.9 46.8c-2.2 2.2-5 3.3-8 3.3z" />
+      <path d="M72.6 194.3a11.2 11.2 0 0 1-8-19.1L175.3 64.7A11.2 11.2 0 1 1 191 80.6L80.6 191c-2.2 2.2-5.1 3.2-8 3.2z" />
+    </g>
+  </svg>
+)
+
+const Link = memo(SvgComponent, isEqual)
+export default Link

package/src/components/icons/LinkedIn.tsx

@@ -0,0 +1,16 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={18} height={19} viewBox="0 0 18 19" fill="none" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0 1.79773C0 1.07677 0.604838 0.5 1.33064 0.5H16.6694C17.3952 0.5 18 1.07677 18 1.79773V17.2023C18 17.9232 17.3952 18.5 16.6694 18.5H1.33064C0.604838 18.5 0 17.9232 0 17.2023V1.79773ZM5.44373 15.5677V7.44492H2.73405V15.5677H5.44373ZM4.08889 6.31541C5.03244 6.31541 5.63728 5.69058 5.63728 4.92155C5.61308 4.1285 5.05663 3.52769 4.11308 3.52769C3.19373 3.52769 2.5647 4.1285 2.5647 4.92155C2.5647 5.69058 3.14534 6.31541 4.08889 6.31541ZM9.65304 15.5677H6.94336C6.94336 15.5677 6.99175 8.18991 6.94336 7.44492H9.67723V8.58586C9.66903 8.59819 9.66097 8.6104 9.65304 8.62249H9.67723V8.58586C10.0439 8.03441 10.6772 7.25266 12.1208 7.25266C13.9111 7.25266 15.2417 8.4062 15.2417 10.9055V15.5677H12.5321V11.2179C12.5321 10.1365 12.145 9.39151 11.153 9.39151C10.403 9.39151 9.94336 9.89619 9.74981 10.3768C9.67723 10.5451 9.65304 10.7854 9.65304 11.0257V15.5677Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+const LinkedIn = memo(SvgComponent, isEqual)
+export default LinkedIn

package/src/components/icons/Mail.tsx

@@ -0,0 +1,16 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 256 256" {...props}>
+    <g fill="currentColor" strokeMiterlimit="10" strokeWidth="0" transform="matrix(2.8 0 0 2.8 1.4 1.4)">
+      <path d="M80.9 78.8H9c-5 0-9.1-4.1-9.1-9.1V20.3c0-5 4-9 9.1-9H81c5 0 9.1 4 9.1 9v49.4c0 5-4 9-9.1 9zM9 17.2A3.1 3.1 0 0 0 6 20.3v49.4c0 1.7 1.4 3 3.1 3H81c1.7 0 3.1-1.3 3.1-3V20.3c0-1.7-1.4-3-3.1-3H9z" />
+      <path d="M45 55.4c-5.4 0-10.6-2.3-14.2-6.3l-28.3-31 4.4-4 28.3 31c2.5 2.8 6 4.3 9.8 4.3 3.8 0 7.3-1.5 9.8-4.3l28.3-31 4.4 4-28.3 31c-3.6 4-8.8 6.3-14.2 6.3z" />
+      <rect width="39" height="6" x="-1" y="57.2" rx="0" ry="0" transform="rotate(-45.1 18.5 60.2)" />
+      <rect width="6" height="39" x="68.5" y="40.7" rx="0" ry="0" transform="rotate(-44.8 71.5 60.2)" />
+    </g>
+  </svg>
+)
+
+const Mail = memo(SvgComponent, isEqual)
+export default Mail

package/src/components/icons/Plus.tsx

@@ -0,0 +1,18 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg height={48} width={48} fill="currentColor" {...props} xmlns="http://www.w3.org/2000/svg">
+    <ellipse cx="26" cy="24.095" rx="26" ry="23.547" fill="#fff" />
+    <path
+      d="M37.742 24.095H14.258M26 13.46V34.73 13.46Z"
+      stroke="#9E9E9E"
+      strokeWidth="5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+const Plus = memo(SvgComponent, isEqual)
+export default Plus

package/src/components/icons/Search.tsx

@@ -0,0 +1,19 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={20} height={20} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" {...props}>
+    <g stroke="currentColor" clipPath="url(#a)">
+      <circle cx="8.2727" cy="8.2727" r="7.2727" />
+      <path d="M13.4551 13.4531L19.5005 19.4986" />
+    </g>
+    <defs>
+      <clipPath>
+        <path fill="currentColor" d="M0 0h14v14H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+const Search = memo(SvgComponent, isEqual)
+export default Search

package/src/components/icons/Share.tsx

@@ -0,0 +1,16 @@
+import isEqual from 'lodash.isequal'
+import React, { memo } from 'react'
+
+const SvgComponent = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 256 256" {...props}>
+    <path
+      fill="currentColor"
+      strokeMiterlimit="10"
+      strokeWidth="0"
+      d="M199.75 145.13a54.45 54.45 0 0 0-43.54 21.82l-47.88-23.93c1.4-4.82 2.2-9.9 2.2-15.17a54.3 54.3 0 0 0-2.2-15.16l47.88-23.93a54.45 54.45 0 0 0 43.54 21.82 54.61 54.61 0 0 0 54.56-54.56c0-30.08-24.48-54.56-54.56-54.56s-54.56 24.48-54.56 54.56c0 5.27.79 10.35 2.19 15.17L99.5 95.11A54.45 54.45 0 0 0 55.97 73.3C25.88 73.3 1.4 97.77 1.4 127.86s24.47 54.56 54.56 54.56c17.79 0 33.56-8.6 43.53-21.82l47.88 23.92a54.32 54.32 0 0 0-2.2 15.17c0 30.09 24.48 54.56 54.57 54.56s54.56-24.47 54.56-54.56a54.62 54.62 0 0 0-54.56-54.56zm0-124c19.24 0 34.89 15.65 34.89 34.9s-15.65 34.88-34.9 34.88-34.88-15.65-34.88-34.89 15.65-34.89 34.89-34.89zM55.97 162.75c-19.24 0-34.9-15.65-34.9-34.9s15.66-34.88 34.9-34.88 34.88 15.65 34.88 34.89-15.65 34.89-34.88 34.89zm143.78 71.83a34.93 34.93 0 0 1-34.9-34.89c0-19.24 15.66-34.89 34.9-34.89s34.89 15.65 34.89 34.9a34.93 34.93 0 0 1-34.9 34.88z"
+    />
+  </svg>
+)
+
+const Share = memo(SvgComponent, isEqual)
+export default Share