@mailstep/design-system 0.0.0

package/src/packages/ui/Elements/Icon/Icon.tsx

@@ -0,0 +1,288 @@
+import React from 'react'
+import styled, { useTheme } from '@xstyled/styled-components'
+import { th } from '@xstyled/styled-components'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { FlipProp, IconName, IconPrefix, library } from '@fortawesome/fontawesome-svg-core'
+
+import { faCoffee as falCoffee } from '@fortawesome/pro-light-svg-icons/faCoffee'
+import { faPaperclip } from '@fortawesome/pro-light-svg-icons/faPaperclip'
+import { faStopwatch } from '@fortawesome/pro-light-svg-icons/faStopwatch'
+import { faHandHoldingBox } from '@fortawesome/pro-light-svg-icons/faHandHoldingBox'
+import { faArrowRightToBracket } from '@fortawesome/pro-regular-svg-icons/faArrowRightToBracket'
+import { faBell } from '@fortawesome/pro-regular-svg-icons/faBell'
+import { faCoffee as farCoffee } from '@fortawesome/pro-regular-svg-icons/faCoffee'
+import { faCommentDots } from '@fortawesome/pro-regular-svg-icons/faCommentDots'
+import { faCopy } from '@fortawesome/pro-regular-svg-icons/faCopy'
+import { faClock } from '@fortawesome/pro-regular-svg-icons/faClock'
+import { faChevronUp } from '@fortawesome/pro-regular-svg-icons/faChevronUp'
+import { faChevronDown } from '@fortawesome/pro-regular-svg-icons/faChevronDown'
+import { faChevronRight as farChevronRight } from '@fortawesome/pro-regular-svg-icons/faChevronRight'
+import { faEllipsisVertical } from '@fortawesome/pro-regular-svg-icons/faEllipsisVertical'
+import { faEnvelope as faEnvelopeLight } from '@fortawesome/pro-regular-svg-icons/faEnvelope'
+import { faEyeSlash } from '@fortawesome/pro-regular-svg-icons/faEyeSlash'
+import { faFile } from '@fortawesome/pro-regular-svg-icons/faFile'
+import { faFileAlt } from '@fortawesome/pro-regular-svg-icons/faFileAlt'
+import { faGear } from '@fortawesome/pro-regular-svg-icons/faGear'
+import { faShareSquare } from '@fortawesome/pro-regular-svg-icons/faShareSquare'
+import { faTriangleExclamation as farTriangleExclamation } from '@fortawesome/pro-regular-svg-icons/faTriangleExclamation'
+import { faCircleArrowDown } from '@fortawesome/pro-regular-svg-icons/faCircleArrowDown'
+import { faCircleArrowRight } from '@fortawesome/pro-regular-svg-icons/faCircleArrowRight'
+import { faPenToSquare } from '@fortawesome/pro-regular-svg-icons/faPenToSquare'
+import { faLock } from '@fortawesome/pro-regular-svg-icons/faLock'
+import { faCalendar } from '@fortawesome/pro-regular-svg-icons/faCalendar'
+import { faCalendarPlus } from '@fortawesome/pro-regular-svg-icons/faCalendarPlus'
+import { faSquareMinus } from '@fortawesome/pro-regular-svg-icons/faSquareMinus'
+import { faComments } from '@fortawesome/pro-regular-svg-icons/faComments'
+import { faFaceMeh } from '@fortawesome/pro-regular-svg-icons/faFaceMeh'
+import { faHand } from '@fortawesome/pro-regular-svg-icons/faHand'
+import { faLink } from '@fortawesome/pro-regular-svg-icons/faLink'
+import { faFileSearch } from '@fortawesome/pro-regular-svg-icons/faFileSearch'
+import { faFileLines } from '@fortawesome/pro-regular-svg-icons/faFileLines'
+import { faTrashCan } from '@fortawesome/pro-regular-svg-icons/faTrashCan'
+import { faCircleQuestion } from '@fortawesome/pro-regular-svg-icons/faCircleQuestion'
+import { faFilter } from '@fortawesome/pro-regular-svg-icons/faFilter'
+import { faAnglesRight } from '@fortawesome/pro-solid-svg-icons/faAnglesRight'
+import { faAngleRight } from '@fortawesome/pro-solid-svg-icons/faAngleRight'
+import { faAngleLeft } from '@fortawesome/pro-solid-svg-icons/faAngleLeft'
+import { faArrowLeft } from '@fortawesome/pro-solid-svg-icons/faArrowLeft'
+import { faBan } from '@fortawesome/pro-solid-svg-icons/faBan'
+import { faBoxOpen } from '@fortawesome/pro-solid-svg-icons/faBoxOpen'
+import { faCartArrowDown } from '@fortawesome/pro-solid-svg-icons/faCartArrowDown'
+import { faCoffee as fasCoffee } from '@fortawesome/pro-solid-svg-icons/faCoffee'
+import { faFlag } from '@fortawesome/pro-solid-svg-icons/faFlag'
+import { faExchange } from '@fortawesome/pro-solid-svg-icons/faExchange'
+import { faEquals } from '@fortawesome/pro-solid-svg-icons/faEquals'
+import { faGreaterThanEqual } from '@fortawesome/pro-solid-svg-icons/faGreaterThanEqual'
+import { faHome } from '@fortawesome/pro-solid-svg-icons/faHome'
+import { faHouseUser } from '@fortawesome/pro-solid-svg-icons/faHouseUser'
+import { faLaptopCode } from '@fortawesome/pro-solid-svg-icons/faLaptopCode'
+import { faLuggageCart } from '@fortawesome/pro-solid-svg-icons/faLuggageCart'
+import { faLessThanEqual } from '@fortawesome/pro-solid-svg-icons/faLessThanEqual'
+import { faNotEqual } from '@fortawesome/pro-solid-svg-icons/faNotEqual'
+import { faPen } from '@fortawesome/pro-solid-svg-icons/faPen'
+import { faPeopleCarry as fasPeopleCarry } from '@fortawesome/pro-solid-svg-icons/faPeopleCarry'
+import { faSearch } from '@fortawesome/pro-solid-svg-icons/faSearch'
+import { faShippingFast } from '@fortawesome/pro-solid-svg-icons/faShippingFast'
+import { faStore } from '@fortawesome/pro-solid-svg-icons/faStore'
+import { faTags } from '@fortawesome/pro-solid-svg-icons/faTags'
+import { faTruck } from '@fortawesome/pro-solid-svg-icons/faTruck'
+import { faUser } from '@fortawesome/pro-solid-svg-icons/faUser'
+import { faUsersGear } from '@fortawesome/pro-solid-svg-icons/faUsersGear'
+import { faWatch } from '@fortawesome/pro-solid-svg-icons/faWatch'
+import { faChartLine } from '@fortawesome/pro-solid-svg-icons/faChartLine'
+import { faCheck } from '@fortawesome/pro-solid-svg-icons/faCheck'
+import { faSquareCheck } from '@fortawesome/pro-solid-svg-icons/faSquareCheck'
+import { faXmark as fasXmark } from '@fortawesome/pro-solid-svg-icons/faXmark'
+import { faChevronLeft } from '@fortawesome/pro-solid-svg-icons/faChevronLeft'
+import { faNoteSticky } from '@fortawesome/pro-solid-svg-icons/faNoteSticky'
+import { faArrowDownToBracket } from '@fortawesome/pro-solid-svg-icons/faArrowDownToBracket'
+import { faPlus } from '@fortawesome/pro-solid-svg-icons/faPlus'
+import { faMinus } from '@fortawesome/pro-solid-svg-icons/faMinus'
+import { faChevronRight as fasChevronRight } from '@fortawesome/pro-solid-svg-icons/faChevronRight'
+import { faChevronDown as fasChevronDown } from '@fortawesome/pro-solid-svg-icons/faChevronDown'
+import { faChevronUp as fasChevronUp } from '@fortawesome/pro-solid-svg-icons/faChevronUp'
+import { faCircleInfo } from '@fortawesome/pro-solid-svg-icons/faCircleInfo'
+import { faCube } from '@fortawesome/pro-solid-svg-icons/faCube'
+import { faBoxArchive } from '@fortawesome/pro-solid-svg-icons/faBoxArchive'
+import { faLocationCrosshairs } from '@fortawesome/pro-solid-svg-icons/faLocationCrosshairs'
+import { faTruckRampBox } from '@fortawesome/pro-solid-svg-icons/faTruckRampBox'
+import { faGlobe } from '@fortawesome/pro-solid-svg-icons/faGlobe'
+import { faCircleCheck } from '@fortawesome/pro-solid-svg-icons/faCircleCheck'
+import { faCircleXmark } from '@fortawesome/pro-solid-svg-icons/faCircleXmark'
+import { faTriangleExclamation } from '@fortawesome/pro-solid-svg-icons/faTriangleExclamation'
+import { faBadgeCheck } from '@fortawesome/pro-solid-svg-icons/faBadgeCheck'
+import { faWebhook } from '@fortawesome/pro-solid-svg-icons/faWebhook'
+import { faTriangleExclamation as fadTriangleExclamation } from '@fortawesome/pro-duotone-svg-icons/faTriangleExclamation'
+import { faFacebookF } from '@fortawesome/free-brands-svg-icons/faFacebookF'
+import { faTwitter } from '@fortawesome/free-brands-svg-icons/faTwitter'
+import { faLinkedinIn } from '@fortawesome/free-brands-svg-icons/faLinkedinIn'
+import { faInstagram } from '@fortawesome/free-brands-svg-icons/faInstagram'
+import { faBox } from '@fortawesome/pro-solid-svg-icons/faBox'
+import { faBox as faBoxRegular } from '@fortawesome/pro-regular-svg-icons/faBox'
+import { faBoxCircleCheck } from '@fortawesome/pro-solid-svg-icons/faBoxCircleCheck'
+import { faShelves } from '@fortawesome/pro-solid-svg-icons/faShelves'
+import { faBoxesStacked } from '@fortawesome/pro-solid-svg-icons/faBoxesStacked'
+
+import { IconProps } from './types'
+
+export const iconDictionary: {
+  [name: string]: IconDefinition | [IconDefinition, FlipProp]
+} = {
+  greaterThan: faAngleRight,
+  startsWith: faAnglesRight,
+  lessThen: faAngleLeft,
+  endsWith: faBan,
+  pen: faPen,
+  edit: faPenToSquare,
+  avatar: faUser,
+  arrowLeft: faArrowLeft,
+  attachment: faPaperclip,
+  dashboard: faChartLine,
+  chevronUp: faChevronUp,
+  chevronDown: faChevronDown,
+  chevronRight: farChevronRight,
+  clock: faClock,
+  complaint: faFileAlt, // 'file-lines'
+  mailLight: faEnvelopeLight,
+  eshop: faStore,
+  expedition: faShippingFast, // 'truck-fast'
+  equals: faEquals, // 'truck-fast'
+  ellipsisVertical: faEllipsisVertical,
+  greaterThanEqual: faGreaterThanEqual,
+  home: faHome,
+  gear: faGear,
+  inbound: faCartArrowDown,
+  inventory: faFile,
+  knowledgeBase: faLaptopCode,
+  luggageCart: faLuggageCart,
+  lessThanEqual: faLessThanEqual,
+  logout: faArrowRightToBracket,
+  login: faArrowRightToBracket,
+  logs: faCopy,
+  notification: faBell,
+  organisation: faHouseUser,
+  partner: farTriangleExclamation,
+  exchangeRates: farTriangleExclamation,
+  product: faBoxOpen,
+  box: faBox,
+  boxRegular: faBoxRegular,
+  boxes: faBoxesStacked,
+  boxChecked: faBoxCircleCheck,
+  shelves: faShelves,
+  reservation: faHandHoldingBox,
+  return: [faShareSquare, 'horizontal'], // 'fa-share-from-square'
+  search: faSearch, // 'magnifying-glass'
+  supplier: farTriangleExclamation,
+  transfer: faExchange, // 'arrow-right-arrow-left'
+  users: faUsersGear,
+  warning: farTriangleExclamation,
+  close: fasXmark,
+  false: fasXmark,
+  deleteX: fasXmark,
+  deleteCan: faTrashCan,
+  import: faCircleArrowDown,
+  export: faCircleArrowRight,
+  check: faCheck,
+  squareCheck: faSquareCheck,
+  squareMinus: faSquareMinus,
+  goLeft: faChevronLeft,
+  goRight: fasChevronRight,
+  goDown: fasChevronDown,
+  goUp: fasChevronUp,
+  internal: faEyeSlash,
+  password: faLock,
+  notEqual: faNotEqual,
+  calendar: faCalendar,
+  note: faNoteSticky,
+  comments: faComments,
+  commentDots: faCommentDots,
+  calendarPlus: faCalendarPlus,
+  download: faArrowDownToBracket,
+  plus: faPlus,
+  minus: faMinus,
+  warningDual: fadTriangleExclamation,
+  info: faCircleInfo,
+  cube: faCube,
+  flatBox: faBoxArchive,
+  link: faLink,
+  facebook: faFacebookF,
+  twitter: faTwitter,
+  linkedin: faLinkedinIn,
+  instagram: faInstagram,
+  faceMeh: faFaceMeh,
+  handStop: faHand,
+  drag: faHand,
+  flag: faFlag,
+  findDetail: faFileSearch,
+  compass: faLocationCrosshairs,
+  boxRamp: faTruckRampBox,
+  earth: faGlobe,
+  filePlaceholder: faFileLines,
+  tags: faTags,
+  circleCheck: faCircleCheck,
+  circleX: faCircleXmark,
+  circleTriangle: faTriangleExclamation,
+  questionMak: faCircleQuestion,
+  badgeCheck: faBadgeCheck,
+  peopleCarry: fasPeopleCarry,
+  stopwatch: faStopwatch,
+  truck: faTruck,
+  webhook: faWebhook,
+  watch: faWatch,
+  filter: faFilter
+}
+
+library.add(
+  farCoffee,
+  fasCoffee,
+  falCoffee,
+  faHandHoldingBox,
+  faLuggageCart,
+  faPaperclip,
+  fasPeopleCarry,
+  faStopwatch,
+  faTruck,
+  faWatch,
+  faFileSearch,
+  faCircleCheck,
+  faCircleXmark,
+  faTriangleExclamation,
+  faBadgeCheck,
+)
+
+const iconPrefixMap = {
+  normal: 'far',
+  light: 'fal',
+  solid: 'fas',
+}
+
+const FaIconSizing = styled.div<{
+  size?: string | number
+  $colorSecondary?: string
+  $fixedWidth: boolean
+}>`
+  ${({ size }): string | number | undefined => size && `font-size: ${size};`}
+  --fa-secondary-color: ${({ $colorSecondary }) => $colorSecondary};
+  --fa-secondary-opacity: 1;
+  display: ${({ $fixedWidth }) => ($fixedWidth ? 'contents' : 'block')};
+`
+
+const Icon = ({
+  icon,
+  fill,
+  style = 'normal',
+  size,
+  className,
+  secondaryColor,
+  fixedWidth = true,
+  spinning,
+}: IconProps): JSX.Element => {
+  const theme = useTheme()
+  const colorFill = fill && (th.color(fill)({ theme }) as string) // React.Text wont return number here
+  const colorSecondary = secondaryColor && (th.color(secondaryColor)({ theme }) as string)
+
+  const namedIcon = (typeof icon == 'string' && iconDictionary?.[icon]) || false
+
+  const iconProp = React.useMemo(() => {
+    if (namedIcon) {
+      return Array.isArray(namedIcon) ? namedIcon[0] : namedIcon
+    }
+    return [iconPrefixMap[style], icon]
+  }, [icon, style, namedIcon]) as [IconPrefix, IconName]
+
+  const flipProp = (namedIcon && Array.isArray(namedIcon) && namedIcon[1]) || undefined
+
+  return (
+    <FaIconSizing size={size} className={className ?? ''} $colorSecondary={colorSecondary} $fixedWidth={fixedWidth}>
+      <FontAwesomeIcon
+        color={colorFill}
+        flip={flipProp}
+        icon={iconProp}
+        className={`faIcon ${fixedWidth ? 'fa-fw' : ''} ${spinning ? 'fa-spin' : ''}`}
+      />
+    </FaIconSizing>
+  )
+}
+
+export default Icon

package/src/packages/ui/Elements/Icon/icons/FlagCZ.tsx

@@ -0,0 +1,10 @@
+import { type FC } from 'react'
+import { SvgProps } from '../types'
+
+export const FlagCZ: FC<SvgProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-cz" viewBox="0 0 640 480" height="1em" width="1em" {...props}>
+    <path fill="#fff" d="M0 0h640v240H0z" />
+    <path fill="#d7141a" d="M0 240h640v240H0z" />
+    <path fill="#11457e" d="M360 240 0 0v480z" />
+  </svg>
+)

package/src/packages/ui/Elements/Icon/icons/FlagUSA.tsx

@@ -0,0 +1,27 @@
+import { type FC } from 'react'
+import { SvgProps } from '../types'
+
+export const FlagUSA: FC<SvgProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-us" viewBox="0 0 640 480" height="1em" width="1em" {...props}>
+    <g fillRule="evenodd">
+      <g strokeWidth="1pt">
+        <path
+          fill="#bd3d44"
+          d="M0 0h972.8v39.4H0zm0 78.8h972.8v39.4H0zm0 78.7h972.8V197H0zm0 78.8h972.8v39.4H0zm0 78.8h972.8v39.4H0zm0 78.7h972.8v39.4H0zm0 78.8h972.8V512H0z"
+          transform="scale(.9375)"
+        />
+        <path
+          fill="#fff"
+          d="M0 39.4h972.8v39.4H0zm0 78.8h972.8v39.3H0zm0 78.7h972.8v39.4H0zm0 78.8h972.8v39.4H0zm0 78.8h972.8v39.4H0zm0 78.7h972.8v39.4H0z"
+          transform="scale(.9375)"
+        />
+      </g>
+      <path fill="#192f5d" d="M0 0h389.1v275.7H0z" transform="scale(.9375)" />
+      <path
+        fill="#fff"
+        d="M32.4 11.8 36 22.7h11.4l-9.2 6.7 3.5 11-9.3-6.8-9.2 6.7 3.5-10.9-9.3-6.7H29zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 11-9.2-6.8-9.3 6.7 3.5-10.9-9.2-6.7h11.4zm64.8 0 3.6 10.9H177l-9.2 6.7 3.5 11-9.3-6.8-9.2 6.7 3.5-10.9-9.3-6.7h11.5zm64.9 0 3.5 10.9H242l-9.3 6.7 3.6 11-9.3-6.8-9.3 6.7 3.6-10.9-9.3-6.7h11.4zm64.8 0 3.6 10.9h11.4l-9.2 6.7 3.5 11-9.3-6.8-9.2 6.7 3.5-10.9-9.2-6.7h11.4zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.6 11-9.3-6.8-9.3 6.7 3.6-10.9-9.3-6.7h11.5zM64.9 39.4l3.5 10.9h11.5L70.6 57 74 67.9l-9-6.7-9.3 6.7L59 57l-9-6.7h11.4zm64.8 0 3.6 10.9h11.4l-9.3 6.7 3.6 10.9-9.3-6.7-9.3 6.7L124 57l-9.3-6.7h11.5zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 10.9-9.2-6.7-9.3 6.7 3.5-10.9-9.2-6.7H191zm64.8 0 3.6 10.9h11.4l-9.3 6.7 3.6 10.9-9.3-6.7-9.2 6.7 3.5-10.9-9.3-6.7H256zm64.9 0 3.5 10.9h11.5L330 57l3.5 10.9-9.2-6.7-9.3 6.7 3.5-10.9-9.2-6.7h11.4zM32.4 66.9 36 78h11.4l-9.2 6.7 3.5 10.9-9.3-6.8-9.2 6.8 3.5-11-9.3-6.7H29zm64.9 0 3.5 11h11.5l-9.3 6.7 3.5 10.9-9.2-6.8-9.3 6.8 3.5-11-9.2-6.7h11.4zm64.8 0 3.6 11H177l-9.2 6.7 3.5 10.9-9.3-6.8-9.2 6.8 3.5-11-9.3-6.7h11.5zm64.9 0 3.5 11H242l-9.3 6.7 3.6 10.9-9.3-6.8-9.3 6.8 3.6-11-9.3-6.7h11.4zm64.8 0 3.6 11h11.4l-9.2 6.7 3.5 10.9-9.3-6.8-9.2 6.8 3.5-11-9.2-6.7h11.4zm64.9 0 3.5 11h11.5l-9.3 6.7 3.6 10.9-9.3-6.8-9.3 6.8 3.6-11-9.3-6.7h11.5zM64.9 94.5l3.5 10.9h11.5l-9.3 6.7 3.5 11-9.2-6.8-9.3 6.7 3.5-10.9-9.2-6.7h11.4zm64.8 0 3.6 10.9h11.4l-9.3 6.7 3.6 11-9.3-6.8-9.3 6.7 3.6-10.9-9.3-6.7h11.5zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 11-9.2-6.8-9.3 6.7 3.5-10.9-9.2-6.7H191zm64.8 0 3.6 10.9h11.4l-9.2 6.7 3.5 11-9.3-6.8-9.2 6.7 3.5-10.9-9.3-6.7H256zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 11-9.2-6.8-9.3 6.7 3.5-10.9-9.2-6.7h11.4zM32.4 122.1 36 133h11.4l-9.2 6.7 3.5 11-9.3-6.8-9.2 6.7 3.5-10.9-9.3-6.7H29zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 10.9-9.2-6.7-9.3 6.7 3.5-10.9-9.2-6.7h11.4zm64.8 0 3.6 10.9H177l-9.2 6.7 3.5 11-9.3-6.8-9.2 6.7 3.5-10.9-9.3-6.7h11.5zm64.9 0 3.5 10.9H242l-9.3 6.7 3.6 11-9.3-6.8-9.3 6.7 3.6-10.9-9.3-6.7h11.4zm64.8 0 3.6 10.9h11.4l-9.2 6.7 3.5 11-9.3-6.8-9.2 6.7 3.5-10.9-9.2-6.7h11.4zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.6 11-9.3-6.8-9.3 6.7 3.6-10.9-9.3-6.7h11.5zM64.9 149.7l3.5 10.9h11.5l-9.3 6.7 3.5 10.9-9.2-6.8-9.3 6.8 3.5-11-9.2-6.7h11.4zm64.8 0 3.6 10.9h11.4l-9.3 6.7 3.6 10.9-9.3-6.8-9.3 6.8 3.6-11-9.3-6.7h11.5zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 10.9-9.2-6.8-9.3 6.8 3.5-11-9.2-6.7H191zm64.8 0 3.6 10.9h11.4l-9.2 6.7 3.5 10.9-9.3-6.8-9.2 6.8 3.5-11-9.3-6.7H256zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 10.9-9.2-6.8-9.3 6.8 3.5-11-9.2-6.7h11.4zM32.4 177.2l3.6 11h11.4l-9.2 6.7 3.5 10.8-9.3-6.7-9.2 6.7 3.5-10.9-9.3-6.7H29zm64.9 0 3.5 11h11.5l-9.3 6.7 3.6 10.8-9.3-6.7-9.3 6.7 3.6-10.9-9.3-6.7h11.4zm64.8 0 3.6 11H177l-9.2 6.7 3.5 10.8-9.3-6.7-9.2 6.7 3.5-10.9-9.3-6.7h11.5zm64.9 0 3.5 11H242l-9.3 6.7 3.6 10.8-9.3-6.7-9.3 6.7 3.6-10.9-9.3-6.7h11.4zm64.8 0 3.6 11h11.4l-9.2 6.7 3.5 10.8-9.3-6.7-9.2 6.7 3.5-10.9-9.2-6.7h11.4zm64.9 0 3.5 11h11.5l-9.3 6.7 3.6 10.8-9.3-6.7-9.3 6.7 3.6-10.9-9.3-6.7h11.5zM64.9 204.8l3.5 10.9h11.5l-9.3 6.7 3.5 11-9.2-6.8-9.3 6.7 3.5-10.9-9.2-6.7h11.4zm64.8 0 3.6 10.9h11.4l-9.3 6.7 3.6 11-9.3-6.8-9.3 6.7 3.6-10.9-9.3-6.7h11.5zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 11-9.2-6.8-9.3 6.7 3.5-10.9-9.2-6.7H191zm64.8 0 3.6 10.9h11.4l-9.2 6.7 3.5 11-9.3-6.8-9.2 6.7 3.5-10.9-9.3-6.7H256zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.5 11-9.2-6.8-9.3 6.7 3.5-10.9-9.2-6.7h11.4zM32.4 232.4l3.6 10.9h11.4l-9.2 6.7 3.5 10.9-9.3-6.7-9.2 6.7 3.5-11-9.3-6.7H29zm64.9 0 3.5 10.9h11.5L103 250l3.6 10.9-9.3-6.7-9.3 6.7 3.6-11-9.3-6.7h11.4zm64.8 0 3.6 10.9H177l-9 6.7 3.5 10.9-9.3-6.7-9.2 6.7 3.5-11-9.3-6.7h11.5zm64.9 0 3.5 10.9H242l-9.3 6.7 3.6 10.9-9.3-6.7-9.3 6.7 3.6-11-9.3-6.7h11.4zm64.8 0 3.6 10.9h11.4l-9.2 6.7 3.5 10.9-9.3-6.7-9.2 6.7 3.5-11-9.2-6.7h11.4zm64.9 0 3.5 10.9h11.5l-9.3 6.7 3.6 10.9-9.3-6.7-9.3 6.7 3.6-11-9.3-6.7h11.5z"
+        transform="scale(.9375)"
+      />
+    </g>
+  </svg>
+)

package/src/packages/ui/Elements/Icon/icons/index.ts

@@ -0,0 +1,2 @@
+export { FlagUSA } from './FlagUSA'
+export { FlagCZ } from './FlagCZ'

package/src/packages/ui/Elements/Icon/index.d.ts

@@ -0,0 +1,9 @@
+import { IIcon, SvgProps } from './types'
+import { FC } from 'react'
+
+declare const Icon: IIcon
+declare const FlagUSA: FC<SvgProps>
+declare const FlagCZ: FC<SvgProps>
+
+export default Icon
+export { FlagUSA, FlagCZ, IIcon}

package/src/packages/ui/Elements/Icon/index.ts

@@ -0,0 +1,6 @@
+import Icon from './Icon'
+
+export type { IconProps } from './types'
+export { FlagCZ, FlagUSA } from './icons'
+export { iconDictionary } from './Icon'
+export default Icon

package/src/packages/ui/Elements/Icon/stories/BadgeIcon.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import BadgeIcon from '../BadgeIcon'
+
+const meta = {
+  title: 'Elements/BadgeIcon',
+  component: BadgeIcon,
+  decorators: [
+    (Story) => (
+      <div style={{ width: '30px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof BadgeIcon>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    icon: 'coffee',
+    badge: 'warning'
+  },
+}
+

package/src/packages/ui/Elements/Icon/stories/Icon.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Icon from '../Icon'
+
+const meta = {
+  title: 'Elements/Icon',
+  component: Icon,
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Icon>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+
+export const Expedition: Story = {
+  args: {
+    icon: 'expedition',
+    size: '40px',
+  },
+}
+
+export const Spinning: Story = {
+  args: {
+    icon: 'expedition',
+    size: '40px',
+    spinning: true
+  },
+}
+
+export const SmallExpedition: Story = {
+  args: {
+    icon: 'expedition',
+    size: '20px',
+  },
+}
+
+export const BigExpedition: Story = {
+  args: {
+    icon: 'expedition',
+    size: '80px',
+  },
+}
+
+export const ExpeditionPink: Story = {
+  args: {
+    icon: 'expedition',
+    fill: 'pink',
+    size: '40px',
+  },
+}
+
+
+export const ExpeditionPinkSolid: Story = {
+  args: {
+    icon: 'expedition',
+    style: 'solid',
+    fill: 'pink',
+    size: '40px',
+  },
+}

package/src/packages/ui/Elements/Icon/types.ts

@@ -0,0 +1,26 @@
+import { MouseEventHandler } from 'react'
+
+export type IconProps = {
+  icon: string
+  style?: 'normal' | 'light' | 'solid'
+  fill?: string
+  size?: number | string
+  className?: string
+  fixedWidth?: boolean
+  spinning?: boolean // todo refactor as library prop
+  secondaryColor?: string
+}
+
+export interface SvgProps {
+  width?: number | string
+  height?: number | string
+  onClick?: MouseEventHandler<SVGSVGElement>
+  fill?: string
+  stroke?: string
+  cursor?: string
+}
+
+
+export interface IIcon {
+  (props: IconProps): JSX.Element
+}

package/src/packages/ui/Elements/Spinner/README.md

@@ -0,0 +1,9 @@
+# Spinner
+
+## Props
+
+| Component  |    Type    | Description                                                                       |
+| ---------- | :--------: | :-------------------------------------------------------------------------------- |
+| variant    | React.node | 'default', 'sm'                                                                   |
+| appearance |   string   | 'concept', 'done', 'error', 'info', 'processing', 'success', 'warning', 'waiting' |
+

package/src/packages/ui/Elements/Spinner/Spinner.tsx

@@ -0,0 +1,36 @@
+import { Svg, Circle } from './styles'
+import { ISpinner } from './types'
+
+export const appearanceToColorMap = {
+  error: 'red1',
+  concept: 'bgLightGray1',
+  done: 'darkGreen',
+  info: 'lightGray6',
+  processing: 'blue2',
+  success: 'green',
+  warning: 'yellow1',
+  waiting: 'gray1',
+}
+
+export const appearanceToFontColorMap: Record<string, string> = {
+  error: 'white',
+  concept: 'blue2',
+  done: 'white',
+  info: 'blue2',
+  processing: 'white',
+  success: 'white',
+  warning: 'blue2',
+  waiting: 'white',
+}
+
+export const Spinner: ISpinner = ({ variant = 'default', appearance }) => {
+  const color = appearance ? appearanceToFontColorMap[appearance] : 'blue2'
+
+  return (
+    <Svg viewBox="22 22 44 44" $variant={variant}>
+      <Circle cx="44" cy="44" r="20.2" fill="none" strokeWidth="3.6" color={color} />
+    </Svg>
+  )
+}
+
+export default Spinner

package/src/packages/ui/Elements/Spinner/index.d.ts

@@ -0,0 +1,5 @@
+import { ISpinner } from './types'
+
+declare const Spinner: ISpinner
+
+export default Spinner

package/src/packages/ui/Elements/Spinner/index.ts

@@ -0,0 +1,3 @@
+import Spinner from './Spinner'
+
+export default Spinner

package/src/packages/ui/Elements/Spinner/stories/Spinner.stories.ts

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Spinner from '../'
+
+const meta = {
+  title: 'Elements/Spinner',
+  component: Spinner,
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Spinner>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+}
+
+export const Sm: Story = {
+  args: {
+    variant: 'sm',
+  },
+}
+
+export const AppearanceConcept: Story = {
+  args: {
+    appearance: 'concept',
+  },
+}
+
+export const AppearanceDone: Story = {
+  args: {
+    appearance: 'done',
+  },
+}
+
+export const AppearanceError: Story = {
+  args: {
+    appearance: 'error',
+  },
+}
+
+export const AppearanceInfo: Story = {
+  args: {
+    appearance: 'info',
+  },
+}
+
+export const AppearanceProcessing: Story = {
+  args: {
+    appearance: 'processing',
+  },
+}
+
+export const AppearanceSuccess: Story = {
+  args: {
+    appearance: 'success',
+  },
+}
+
+export const AppearanceWarning: Story = {
+  args: {
+    appearance: 'warning',
+  },
+}
+
+export const AppearanceWaiting: Story = {
+  args: {
+    appearance: 'waiting',
+  },
+}

package/src/packages/ui/Elements/Spinner/styles.ts

@@ -0,0 +1,38 @@
+import styled, { th } from '@xstyled/styled-components'
+import { keyframes } from 'styled-components'
+
+const KeyframesCircularDash = keyframes`
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0px;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -125px;
+  }
+`
+
+const KeyframesCircularRotate = keyframes`
+  100% {
+    transform: rotate(360deg);
+  }
+`
+
+export const Svg = styled.svg<{ $variant: 'default' | 'sm' }>`
+  width: ${({ $variant }): string => ($variant === 'sm' ? '16' : '40')}px;
+  height: ${({ $variant }): string => ($variant === 'sm' ? '16' : '40')}px;
+  animation: ${KeyframesCircularRotate} 1.4s linear infinite;
+`
+
+export const Circle = styled.circle`
+  animation: ${KeyframesCircularDash} 1.4s ease-in-out infinite;
+  stroke-dasharray: 80px, 200px;
+  stroke-dashoffset: 0px;
+  stroke: ${({ color }) => (color ? th.color(color) : th.color('blue2'))};
+`

package/src/packages/ui/Elements/Spinner/types.ts

@@ -0,0 +1,8 @@
+export type AppearanceType = 'concept' | 'done' | 'error' | 'info' | 'processing' | 'success' | 'warning' | 'waiting'
+
+export interface SpinnerProps {
+  variant?: 'default' | 'sm'
+  appearance?: AppearanceType
+}
+
+export type ISpinner = (props: SpinnerProps) => JSX.Element

package/src/packages/ui/Elements/Spinner/yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+

package/src/packages/ui/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,3 @@
+import { Color, Theme, Themes } from './types'
+
+export { Color, Theme, Themes }