hrm_ui_lib 1.0.0

package/src/components/ProgressStep/Step.tsx

@@ -0,0 +1,96 @@
+import classNames from 'classnames'
+import React, { ReactElement, useMemo } from 'react'
+import { Text } from '../Text'
+import { StepTypes, TStepProps } from './types'
+import { PROGRESS_STATUSES } from './consts'
+import IconDismissCircle from '../SVGIcons/IconDismissCircle'
+import IconCheckmarkCircle from '../SVGIcons/IconCheckmarkCircle'
+
+export const Step = (props: TStepProps): ReactElement => {
+  const {
+    width,
+    step,
+    stepSize = 'large',
+    index,
+    activeStep,
+
+    stepType,
+    onStepClick
+  } = props
+  const { label, subText, value, status } = step
+  const isActive = activeStep === value
+  const isCompleted = status === PROGRESS_STATUSES.completed
+  const isRejected = status === PROGRESS_STATUSES.rejected
+  const isReview = status === PROGRESS_STATUSES.reviewed
+
+  const textType = useMemo(() => {
+    if (isActive && !isRejected) {
+      return 'brand'
+    }
+    if (isCompleted || isRejected) {
+      return 'inverse'
+    }
+    return 'tertiary'
+  }, [isCompleted, isRejected, isActive])
+
+  const onClick = () => {
+    if (onStepClick) {
+      onStepClick(value)
+    }
+  }
+
+  const stepItemContent = useMemo(() => {
+    if (stepType === StepTypes.number) {
+      return (
+        <Text
+          type={textType}
+          size={stepSize == 'large' ? 'medium' : 'small'}
+          weight={stepSize == 'large' ? 'semibold' : 'regular'}
+        >{`${index}`}</Text>
+      )
+    }
+    if (stepType === StepTypes.dot) {
+      if (isActive) {
+        return <span className={classNames('step__circle__dot')} />
+      }
+      if (isCompleted) {
+        const iconSize = stepSize == 'large' ? 'small' : 'xsmall'
+        if (isRejected) {
+          return <IconDismissCircle size={iconSize} type="inverse" />
+        }
+        return <IconCheckmarkCircle size={iconSize} type="inverse" />
+      }
+    }
+    return null
+  }, [index, stepType, stepSize, isCompleted, isActive, isRejected, textType])
+
+  return (
+    <div
+      className={classNames('step', `step--${stepSize}`, {
+        active: isActive,
+        completed: isCompleted && !isActive,
+        rejected: isRejected,
+        review: isReview
+      })}
+      style={{ width }}
+      onClick={onClick}
+    >
+      <div className="step__top">
+        <div className="step__circle">{stepItemContent}</div>
+      </div>
+      <div className="step__label">
+        <Text
+          size={stepSize == 'large' ? 'standard' : 'small'}
+          weight="semibold"
+          lineHeight={'large'}
+          className="text-truncate"
+        >
+          {label}
+        </Text>
+        <Text size={stepSize == 'large' ? 'small' : 'xsmall'} className="text-truncate">
+          {subText}
+        </Text>
+      </div>
+    </div>
+  )
+}

package/src/components/ProgressStep/consts.ts

@@ -0,0 +1,6 @@
+export enum PROGRESS_STATUSES {
+  rejected = 'rejected',
+  reviewed = 'reviewed',
+  completed = 'completed',
+  initial = 'initial'
+}

package/src/components/ProgressStep/index.ts

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

package/src/components/ProgressStep/types.ts

@@ -0,0 +1,34 @@
+import { PROGRESS_STATUSES } from './consts'
+
+export type TStepValue = number | string
+export interface TStep {
+  value: TStepValue
+  label: string
+  subText?: string
+  status?: PROGRESS_STATUSES
+}
+export type TStepType = 'number' | 'dot'
+export type TSteps = TStep[]
+
+export type TProgressStepProps = {
+  steps: TSteps
+  stepType: TStepType
+  stepDirection: 'horizontal' | 'vertical'
+  stepSize: 'large' | 'small'
+  activeStep: TStepValue
+  setActiveStep: (v: TStepValue) => void
+}
+
+export type TStepProps = {
+  width: string
+  step: TStep
+  stepSize?: 'large' | 'small'
+  index: number
+  stepType?: TStepType
+  onStepClick: (v: TStepValue) => void
+  activeStep: TStepValue
+}
+export enum StepTypes {
+  number = 'number',
+  dot = 'dot'
+}

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,64 @@
+import React, { forwardRef, ReactElement } from 'react'
+import { TRadioProps } from './types'
+import { Text } from '../Text'
+import classnames from 'classnames'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Radio = forwardRef((props: TRadioProps): ReactElement | null => {
+  const {
+    name,
+    label,
+    helperText,
+    disabled,
+    setFieldValue,
+    isSelected,
+    value,
+    className = '',
+    onClick,
+    dataId = '',
+    iconProps
+  } = props
+  const isChecked = !!value || !!isSelected
+  const iconElement = iconProps ? iconProps : <span className="controller__icon"></span>
+
+  const changeHandler = () => {
+    if (name && setFieldValue) {
+      setFieldValue(name, !isChecked, { shouldValidate: !isChecked })
+    }
+    if (onClick) {
+      onClick(!isChecked)
+    }
+  }
+
+  return (
+    <label
+      className={classnames('controller', 'controller--radio', className, {
+        'controller--disabled': disabled
+      })}
+    >
+      <input
+        data-id={dataId}
+        type="radio"
+        tabIndex={0}
+        onChange={changeHandler}
+        checked={isSelected}
+        disabled={disabled}
+      />
+      {iconElement}
+      {label ? (
+        <div className="controller__right">
+          <Text type={disabled ? 'disabled' : 'primary'} className="controller__label">
+            {label}
+          </Text>
+          {helperText ? (
+            <Text size="small" type={disabled ? 'disabled' : 'secondary'}>
+              {helperText}
+            </Text>
+          ) : null}
+        </div>
+      ) : null}
+    </label>
+  )
+})
+
+Radio.displayName = 'Radio'

package/src/components/Radio/RadioGroup.tsx

@@ -0,0 +1,74 @@
+import React, { forwardRef } from 'react'
+import { Radio } from './Radio'
+import { TRadioGroupProps, TRadioOptionItem } from './types'
+import { Label } from '../../helperComponents'
+import classnames from 'classnames'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const RadioGroup = forwardRef((props: TRadioGroupProps, ref): JSX.Element => {
+  const {
+    isHorizontal = false,
+    name,
+    options,
+    setFieldValue,
+    value,
+    handleChange,
+    label,
+    required,
+    disabled,
+    className,
+    labelAddons,
+    hasError,
+    selected
+  } = props
+
+  const onSelect = (selected: number | string) => {
+    if (name && setFieldValue) {
+      setFieldValue(name, selected, { shouldValidate: true })
+    }
+    if (handleChange) {
+      handleChange(selected)
+    }
+  }
+
+  return (
+    <div
+      className={classnames(
+        'radio-group',
+        {
+          'radio-group--horizontal': isHorizontal,
+          'radio-group--vertical': !isHorizontal
+        },
+        className
+      )}
+    >
+      <Label
+        className="radio-group__label"
+        text={label}
+        invalid={hasError}
+        required={required}
+        disabled={disabled}
+        labelAddons={labelAddons}
+      />
+      <div className="radio-group__inner">
+        {options.map((radioOption: TRadioOptionItem) => {
+          return (
+            <Radio
+              label={radioOption.label}
+              helperText={radioOption.helperText}
+              key={radioOption.value}
+              name={name}
+              disabled={disabled}
+              className="radio-group__item"
+              isSelected={radioOption.value === value || radioOption.value === selected}
+              onClick={() => onSelect(radioOption.value)}
+              dataId={radioOption.dataId}
+            />
+          )
+        })}
+      </div>
+    </div>
+  )
+})
+
+RadioGroup.displayName = 'RadioGroup'

package/src/components/Radio/index.ts

@@ -0,0 +1,2 @@
+export * from './Radio'
+export * from './RadioGroup'

package/src/components/Radio/types.ts

@@ -0,0 +1,31 @@
+import { ReactElement } from 'react'
+
+export interface TRadioProps extends IFormCompProps {
+  showRadioIcon?: boolean
+  label?: string | ReactElement
+  helperText?: string | ReactElement
+  className?: string
+  disabled?: boolean
+  iconProps?: ReactElement
+  isSelected?: boolean
+  onClick?: (isChecked: boolean) => void
+}
+
+export type TRadioOptionItem = {
+  value: number | string
+  label: string
+  helperText?: string | ReactElement
+  dataId?: string
+}
+
+export interface TRadioGroupProps extends IFormCompProps {
+  label?: string | ReactElement
+  className?: string
+  isHorizontal?: boolean
+  selected: number | string
+  options: TRadioOptionItem[]
+  handleChange?: (selected: number | string) => void
+  required?: boolean
+  disabled?: boolean
+  labelAddons?: ReactElement
+}

package/src/components/SVGIcons/IconAdd.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconAdd = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <path
+      d="M11.7501 3C12.1298 3 12.4436 3.28201 12.4934 3.64808L12.5002 3.74985L12.5014 11H19.7545C20.1687 11 20.5045 11.3358 20.5045 11.75C20.5045 12.1297 20.2224 12.4435 19.8563 12.4932L19.7545 12.5H12.5014L12.5035 19.7491C12.5036 20.1633 12.1679 20.4993 11.7536 20.4993C11.3739 20.4993 11.0601 20.2173 11.0104 19.8512L11.0035 19.7494L11.0014 12.5H3.75244C3.33823 12.5 3.00244 12.1642 3.00244 11.75C3.00244 11.3703 3.2846 11.0565 3.65067 11.0068L3.75244 11H11.0014L11.0002 3.75015C11.0002 3.33594 11.3359 3 11.7501 3Z"
+      fill="#222222"
+    />
+  </svg>
+)
+
+export default IconAdd

package/src/components/SVGIcons/IconAddCircle.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconAddCircle = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <g id="Size=24, Theme=Regular">
+      <path
+        id="Shape"
+        d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM12 7C12.4142 7 12.75 7.33579 12.75 7.75V11.25H16.25C16.6642 11.25 17 11.5858 17 12C17 12.4142 16.6642 12.75 16.25 12.75H12.75V16.25C12.75 16.6642 12.4142 17 12 17C11.5858 17 11.25 16.6642 11.25 16.25V12.75H7.75C7.33579 12.75 7 12.4142 7 12C7 11.5858 7.33579 11.25 7.75 11.25H11.25V7.75C11.25 7.33579 11.5858 7 12 7Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconAddCircle

package/src/components/SVGIcons/IconAddCircleFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconAddCircleFilled = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <g id="Size=24, Theme=Filled">
+      <path
+        id="Shape"
+        d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 7C11.6203 7 11.3065 7.28215 11.2568 7.64823L11.25 7.75V11.25H7.75C7.33579 11.25 7 11.5858 7 12C7 12.3797 7.28215 12.6935 7.64823 12.7432L7.75 12.75H11.25V16.25C11.25 16.6642 11.5858 17 12 17C12.3797 17 12.6935 16.7178 12.7432 16.3518L12.75 16.25V12.75H16.25C16.6642 12.75 17 12.4142 17 12C17 11.6203 16.7178 11.3065 16.3518 11.2568L16.25 11.25H12.75V7.75C12.75 7.33579 12.4142 7 12 7Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconAddCircleFilled

package/src/components/SVGIcons/IconAddFilled.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconAddFilled = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <path
+      d="M11.8834 3.00673L12 3C12.5128 3 12.9355 3.38604 12.9933 3.88338L13 4V11H20C20.5128 11 20.9355 11.386 20.9933 11.8834L21 12C21 12.5128 20.614 12.9355 20.1166 12.9933L20 13H13V20C13 20.5128 12.614 20.9355 12.1166 20.9933L12 21C11.4872 21 11.0645 20.614 11.0067 20.1166L11 20V13H4C3.48716 13 3.06449 12.614 3.00673 12.1166L3 12C3 11.4872 3.38604 11.0645 3.88338 11.0067L4 11H11V4C11 3.48716 11.386 3.06449 11.8834 3.00673L12 3L11.8834 3.00673Z"
+      fill="#222222"
+    />
+  </svg>
+)
+
+export default IconAddFilled

package/src/components/SVGIcons/IconAlert.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconAlert = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <g id="Size=24, Theme=Regular">
+      <path
+        id="Shape"
+        d="M11.9999 1.99609C16.0498 1.99609 19.3565 5.19084 19.4957 9.24515L19.4999 9.49609V13.5931L20.8799 16.7491C20.9489 16.907 20.9846 17.0775 20.9846 17.2499C20.9846 17.9402 20.4249 18.4999 19.7346 18.4999L14.9999 18.5014C14.9999 20.1582 13.6567 21.5014 11.9999 21.5014C10.4022 21.5014 9.09621 20.2524 9.00496 18.6776L8.99941 18.4991L4.27473 18.4999C4.10339 18.4999 3.93388 18.4646 3.77673 18.3964C3.14353 18.1213 2.85318 17.3851 3.12822 16.7519L4.49987 13.594V9.49599C4.50046 5.3412 7.85195 1.99609 11.9999 1.99609ZM13.4994 18.4991L10.4999 18.5014C10.4999 19.3298 11.1714 20.0014 11.9999 20.0014C12.7796 20.0014 13.4203 19.4065 13.493 18.6458L13.4994 18.4991ZM11.9999 3.49609C8.67971 3.49609 6.00034 6.17035 5.99987 9.49609V13.9057L4.65589 16.9999H19.3524L17.9999 13.9067L18 9.50895L17.9962 9.28375C17.8852 6.05027 15.2414 3.49609 11.9999 3.49609Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconAlert

package/src/components/SVGIcons/IconAlertBadge.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconAlertBadge = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <g id="Size=24, Theme=Regular">
+      <path
+        id="Shape"
+        d="M11.9876 1.99609C13.4351 1.99609 14.7878 2.40297 15.9353 3.11058C15.5934 3.47585 15.329 3.91431 15.1682 4.39985C14.2457 3.82617 13.1554 3.49569 11.9876 3.49569C8.66297 3.49569 5.97997 6.16922 5.97949 9.49407V13.9025L4.63369 16.9958H19.3502L17.9958 13.9035L17.9959 9.50692L17.9921 9.28178C17.9884 9.17344 17.9818 9.06586 17.9725 8.95912C18.1435 8.98472 18.3185 8.99798 18.4966 8.99798C18.8347 8.99798 19.1616 8.95018 19.4709 8.86099C19.4816 8.98748 19.4892 9.1149 19.4936 9.24319L19.4978 9.49407V13.5899L20.8797 16.7451C20.9489 16.903 20.9846 17.0734 20.9846 17.2457C20.9846 17.9359 20.4241 18.4954 19.7329 18.4954L14.9917 18.4969C14.9917 20.1533 13.6467 21.4961 11.9876 21.4961C10.3878 21.4961 9.08004 20.2475 8.98867 18.6731L8.98312 18.4946L4.25202 18.4954C4.08044 18.4954 3.9107 18.4602 3.75334 18.392C3.11928 18.117 2.82853 17.3809 3.10394 16.7479L4.47746 13.5909V9.49396C4.47805 5.34029 7.8341 1.99609 11.9876 1.99609ZM13.4892 18.4946L10.4856 18.4969C10.4856 19.3251 11.1581 19.9965 11.9876 19.9965C12.7684 19.9965 13.41 19.4018 13.4828 18.6413L13.4892 18.4946ZM16.033 5.05266C16.1282 4.52552 16.3889 4.05584 16.7595 3.6992C17.2097 3.26601 17.822 2.99961 18.4966 2.99961C19.8792 2.99961 21 4.11859 21 5.49893C21 6.59182 20.2974 7.52087 19.3185 7.86042C19.0611 7.94973 18.7845 7.99826 18.4966 7.99826C18.2482 7.99826 18.0083 7.96214 17.7818 7.89488C16.7475 7.58775 15.9932 6.63128 15.9932 5.49893C15.9932 5.34661 16.0069 5.19746 16.033 5.05266Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconAlertBadge

package/src/components/SVGIcons/IconAlertBadgeFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconAlertBadgeFilled = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <g id="Size=24, Theme=Filled">
+      <path
+        id="Shape"
+        d="M18.5 9C18.8376 9 19.1641 8.95219 19.473 8.86298C19.4909 9.07425 19.5 9.28801 19.5 9.50391V13.5024L20.9183 16.6625C20.9732 16.7848 21.0016 16.9174 21.0016 17.0515C21.0016 17.5762 20.5763 18.0015 20.0516 18.0015H3.95219C3.8184 18.0015 3.68613 17.9733 3.56402 17.9186C3.08515 17.7042 2.87073 17.1422 3.08511 16.6633L4.50001 13.5028L4.50011 9.49099L4.50453 9.24107C4.6436 5.21035 7.95588 2.00391 12 2.00391C13.4433 2.00391 14.7915 2.41162 15.9355 3.11815C15.355 3.74286 15 4.57997 15 5.5C15 7.433 16.567 9 18.5 9ZM14.9583 19.003C14.7196 20.4211 13.486 21.5015 12 21.5015C10.514 21.5015 9.28037 20.4211 9.04173 19.003H14.9583ZM18.5 8C19.8807 8 21 6.88071 21 5.5C21 4.11929 19.8807 3 18.5 3C17.1193 3 16 4.11929 16 5.5C16 6.88071 17.1193 8 18.5 8Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconAlertBadgeFilled

package/src/components/SVGIcons/IconAlertFilled.tsx

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconAlertFilled = ({
+  size,
+  type,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [`svg-icon__type-${type}`]: type,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <g id="Size=24, Theme=Filled">
+      <path
+        id="Shape"
+        d="M9.04173 19.003H14.9583C14.7196 20.4211 13.486 21.5015 12 21.5015C10.514 21.5015 9.28037 20.4211 9.04173 19.003ZM12 2.00391C16.1421 2.00391 19.5 5.36177 19.5 9.50391V13.5024L20.9183 16.6625C20.9732 16.7848 21.0016 16.9174 21.0016 17.0515C21.0016 17.5762 20.5763 18.0015 20.0516 18.0015H3.95219C3.8184 18.0015 3.68613 17.9733 3.56402 17.9186C3.08515 17.7042 2.87073 17.1422 3.08511 16.6633L4.50001 13.5028L4.50011 9.49099L4.50453 9.24107C4.6436 5.21035 7.95588 2.00391 12 2.00391Z"
+        fill="#222222"
+      />
+    </g>
+  </svg>
+)
+
+export default IconAlertFilled

package/src/components/SVGIcons/IconAm.tsx

@@ -0,0 +1,46 @@
+import React, { ReactElement } from 'react'
+import { ISVGIconProps } from './types'
+import classNames from 'classnames'
+
+export const IconAm = ({
+  size,
+  className = '',
+  onClick,
+  refHandler,
+  id,
+  dataId
+}: ISVGIconProps): ReactElement => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames('svg-icon', {
+      [`svg-icon__size-${size}`]: size,
+      [className]: className
+    })}
+    viewBox="0 0 24 24"
+    fill="none"
+    onClick={onClick}
+    ref={refHandler}
+    id={id}
+    data-id={dataId ? `${dataId}-svg-icon` : ''}
+  >
+    <rect y="3.43005" width="24" height="17.1429" rx="2" fill="white" />
+    <mask
+      id="mask0_1993_1683"
+      style={{ maskType: 'luminance' }}
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="3"
+      width="24"
+      height="18"
+    >
+      <rect y="3.43005" width="24" height="17.1429" rx="2" fill="white" />
+    </mask>
+    <g mask="url(#mask0_1993_1683)">
+      <path d="M0 14.8587H24V9.14441H0V14.8587Z" fill="#1047B9" />
+      <path d="M0 9.14434H24V3.43005H0V9.14434Z" fill="#F01C31" />
+      <path d="M0 20.5729H24V14.8586H0V20.5729Z" fill="#FECB2F" />
+    </g>
+  </svg>
+)
+
+export default IconAm