@woovi/ui 4.0.942

package/src/index.tsx

@@ -0,0 +1,328 @@
+import Avatar, { AvatarCircle } from './avatar/Avatar';
+import AvatarGroup from './avatar/AvatarGroup';
+import AvatarGroupArray from './avatar/AvatarGroupArray';
+import AvatarGroupSelectedAll from './avatar/AvatarGroupSelectedAll';
+import BackButton from './BackButton';
+import Badge from './Badge';
+import ActionButton from './buttons/ActionButton';
+import DangerButton from './buttons/DangerButton';
+import SplitButton from './buttons/SplitButton';
+import Card from './card/Card';
+import CardActions from './card/CardActions';
+import CardContent from './card/CardContent';
+import CardForm from './card/CardForm';
+import CardSkeleton from './card/CardSkeleton';
+import CardWithActions from './card/cardWithActions/CardWithActions';
+import CardWithLink from './card/CardWithLink';
+import CardWithLinkSkeleton from './card/CardWithLinkSkeleton';
+import { default as CardAnalytics } from './cardAnalytics/CardAnalytics';
+import Grid from './cardGrid/Grid';
+import Circle from './Circle';
+import CircleButton from './CircleButton';
+import { Code } from './code/Code';
+import { Collapse } from './collapsible/Collapse';
+import Collapsible from './collapsible/Collapsible';
+import CollapsibleActions from './collapsible/CollapsibleActions';
+import CollapsibleDetails from './collapsible/CollapsibleDetails';
+import { CollapsibleFillWrapper } from './collapsible/CollapsibleFillWrapper';
+import CollapsibleGroup from './collapsible/CollapsibleGroup';
+import CollapsibleInfinityActions from './collapsible/CollapsibleInfinityActions';
+import CollapsibleStep from './collapsible/CollapsibleStep';
+import CollapsibleStepHeader from './collapsible/CollapsibleStepHeader';
+import CollapsibleTree, {
+  CollapsibleTreeActions,
+} from './collapsible/CollapsibleTree';
+import ExpandMoreIcon from './collapsible/ExpandMoreIcon';
+import LeafCollapsible from './collapsible/LeafCollapsible';
+import { TransparencyCollapsibleWrapper } from './collapsible/TransparencyCollapsibleWrapper';
+import Column from './Column';
+import ActionMargin from './content/ActionMargin';
+import ActionMarginText from './content/ActionMarginText';
+import Content from './content/Content';
+import IntroText from './content/IntroText';
+import EmptyMessage from './EmptyMessage';
+import EncryptedText from './EncryptedText';
+import type { FilterTagBySelectField_query$key } from './filter/filterApplied/__generated__/FilterTagBySelectField_query.graphql';
+import FilterRelayFormik from './filter/FilterRelayFormik';
+import FormikFilter from './filter/FormikFilter';
+import useFilterFormik from './filter/useFilterFormik';
+import FloatingMenu from './FloatingMenu';
+import SectionHeading from './heading/SectionHeading';
+import {
+  buildSchemeGenerator,
+  getShadeOfColor,
+  hexToRgb,
+  hexToRgbaString,
+} from './helpers';
+import Divider from './helpers/Divider';
+import HorizontalStack from './helpers/HorizontalStack';
+import HoverPopper from './helpers/HoverPopper';
+import Icon from './icons/Icon';
+import SVG from './icons/SVG';
+import { LayoutRoot } from './LayoutRoot';
+import LayoutWrapper from './layoutWrapper/LayoutWrapper';
+import LinearProgress from './LinearProgress';
+import Link from './Link';
+import Loading from './Loading';
+import Modal from './Modal/Modal';
+import GiftbackEnvelopeSvg from './openpix/images/GiftbackEnvelopeSvg';
+import WooviLogoInMobile from './openpix/images/WooviLogoInMobile';
+import OverflowDiv from './OverflowDiv';
+import ProgressBar from './ProgressBar';
+import ProgressBarText from './ProgressBarText';
+import QuestionTooltip from './QuestionTooltip';
+import RefreshButtonRelay from './relay/RefreshButtonRelay';
+import RefreshIconButton from './relay/RefreshIconButton';
+import SearchInputRelay from './relay/SearchInputRelay';
+import TopPagination from './relay/TopPagination';
+import RoutedTabs from './routed/RoutedTabs';
+import TabbedContent from './routed/TabbedContent';
+import Row from './Row';
+import SafeTextTooltip, { toSafeTruncate } from './SafeTextTooltip';
+import ScreenHeaderTitle from './screenHeader/components/ScreenHeaderTitle';
+import ScreenHeaderCard from './screenHeaderCard/ScreenHeaderCard';
+import SearchField from './SearchField';
+import { statementColors } from './statement/statementColors';
+import { default as TransactionTypeText } from './statement/TransactionTypeText';
+import Step from './Step';
+import { SwipeableModal } from './swipeableModal/SwipeableModal';
+import Tag from './tag/Tag';
+import TagsContainer from './tag/TagsContainer';
+import {
+  TransactionTagEntryType,
+  TRANSACTION_TAG_ENTRYTYPE_COLOR,
+} from './TransactionTagEntryTypes';
+import {
+  TransactionTagStatus,
+  TRANSACTION_TAG_STATUS_COLOR,
+} from './TransactionTagStatus';
+
+export { default as LoginWrapper } from './auth/LoginWrapper';
+export { getLoadingIconProp } from './buttons/getLoadingIconProp';
+export { default as CardBasicContext } from './card/basicContext/CardBasicContext';
+export { default as CardList } from './card/CardList';
+export type { CollapseProps } from './collapsible/Collapse';
+export { default as CompanyLogo } from './company/CompanyLogo';
+export * from './dialog';
+export { default as ErrorBoundaryWithRetry } from './error/ErrorBoundaryWithRetry';
+export { default as FileDrop } from './file/FileDrop';
+export { default as Filter } from './filter/Filter';
+export type { FieldRowProps } from './form/FieldRow';
+export { default as FieldRow } from './form/FieldRow';
+export { Logo } from './Logo';
+export { default as PinInput } from './pinInput/PinInput';
+export { default as PinInputFormik } from './pinInput/PinInputFormik';
+export { default as ContentBoundary } from './root/ContentBoundary';
+export * from './routed/RoutedTabs';
+export * from './screenHeader/ScreenHeaderUI';
+export * from './sidebar';
+export * from './snackbar';
+export * from './tag/Tag';
+export { TagWebhookStatus } from './TagWebhookStatus';
+export { default as TextMultiline } from './text/TextMultiline';
+export { default as TextDialog } from './textDialog/TextDialog';
+export * from './unSupportedBrowser';
+export {
+  ActionButton,
+  ActionMargin,
+  ActionMarginText,
+  Avatar,
+  AvatarCircle,
+  AvatarGroup,
+  AvatarGroupArray,
+  AvatarGroupSelectedAll,
+  BackButton,
+  Badge,
+  buildSchemeGenerator,
+  Card,
+  CardActions,
+  CardAnalytics,
+  CardContent,
+  CardForm,
+  CardSkeleton,
+  CardWithActions,
+  CardWithLink,
+  CardWithLinkSkeleton,
+  Circle,
+  CircleButton,
+  Code,
+  Collapse,
+  Collapsible,
+  CollapsibleActions,
+  CollapsibleDetails,
+  CollapsibleFillWrapper,
+  CollapsibleGroup,
+  CollapsibleInfinityActions,
+  CollapsibleStep,
+  CollapsibleStepHeader,
+  CollapsibleTree,
+  CollapsibleTreeActions,
+  Column,
+  Content,
+  DangerButton,
+  Divider,
+  EmptyMessage,
+  EncryptedText,
+  ExpandMoreIcon,
+  FilterRelayFormik,
+  FilterTagBySelectField_query$key,
+  FloatingMenu,
+  FormikFilter,
+  getShadeOfColor,
+  GiftbackEnvelopeSvg,
+  Grid,
+  hexToRgb,
+  hexToRgbaString,
+  HorizontalStack,
+  HoverPopper,
+  Icon,
+  IntroText,
+  LayoutRoot,
+  LayoutWrapper,
+  LeafCollapsible,
+  LinearProgress,
+  Link,
+  Loading,
+  Modal,
+  OverflowDiv,
+  ProgressBar,
+  ProgressBarText,
+  QuestionTooltip,
+  RefreshButtonRelay,
+  RefreshIconButton,
+  RoutedTabs,
+  Row,
+  SafeTextTooltip,
+  ScreenHeaderCard,
+  ScreenHeaderTitle,
+  SearchField,
+  SearchInputRelay,
+  SectionHeading,
+  SplitButton,
+  statementColors,
+  Step,
+  SVG,
+  SwipeableModal,
+  TabbedContent,
+  Tag,
+  TagsContainer,
+  TopPagination,
+  toSafeTruncate,
+  TRANSACTION_TAG_ENTRYTYPE_COLOR,
+  TRANSACTION_TAG_STATUS_COLOR,
+  TransactionTagEntryType,
+  TransactionTagStatus,
+  TransactionTypeText,
+  TransparencyCollapsibleWrapper,
+  useFilterFormik,
+  WooviLogoInMobile,
+};
+export { Banner } from './Banner';
+export { default as CardField } from './cardGrid/CardField';
+export { default as CardFieldCentered } from './cardGrid/CardFieldCentered';
+export { default as CardGrid } from './cardGrid/CardGrid';
+export { default as DrawerCard } from './drawer/DrawerCard';
+export { DrawerResponsiveWrapper } from './drawer/DrawerResponsiveWrapper';
+export { default as ErrorView, ErrorViewBoundary } from './error/ErrorView';
+export { decodeQueryParamsFromLocation } from './filter/decodeQueryParamsFromLocation';
+export { formatFilters } from './filter/formatFilters';
+export { default as OrderBySelect } from './filter/orderBy/OrderBySelect';
+export { stringToBoolean } from './filter/stringToBoolean';
+export { default as LayoutWrapperFluid } from './layoutWrapper/LayoutWrapperFluid';
+export { default as OpenPixLogoColor } from './logo/OpenPixLogoColor';
+export { default as WooviLogo } from './logo/WooviLogo';
+export { default as BoxFlex } from './mui/BoxFlex';
+export { ChargeTagStatus } from './openpix/charge/ChargeTagStatus';
+export {
+  AccountInfoLabel,
+  AdditionalInfo,
+} from './openpix/paymentLink/AdditionalInfo';
+export { default as InfoSide } from './openpix/paymentLink/InfoSide';
+export * from './openpix/paymentLink/PaymentLink';
+export { default as QrCodeSide } from './openpix/paymentLink/QrCodeSide';
+export { default as WooviAuthForm } from './openpix/shopper/WooviAuthForm';
+export { PixTransactionTypeTag } from './openpix/transaction/PixTransactionTypeTag';
+export { default as SelectAll } from './select/SelectAll';
+export { default as Stepper } from './stepper/Stepper';
+export { Terms } from './term/Terms';
+export { TermsLink } from './term/TermsLink';
+export { DOCUMENT_TYPE, default as TermsModal } from './term/TermsModal';
+export { default as useTerms } from './term/useTerms';
+export { ThemeMuiTheme } from './theme/Themes';
+
+// order
+export type { ActionButtonProps } from './buttons/ActionButton';
+export { default as PayWithPixButton } from './buttons/PayWithPixButton';
+export { CardWithImage } from './cardWithImage/CardWithImage';
+export { CashbackTagStatus } from './CashbackTagStatus';
+export { default as ClockIcon } from './ClockIcon';
+export { CopyInput } from './CopyInput';
+export { default as Countdown } from './countdown/Countdown';
+export { cellTypeBasisToPercentage } from './datagrid/cellTypeBasisToPercentage';
+export { cellTypeExpand } from './datagrid/cellTypeExpand';
+export { cellTypeLink } from './datagrid/cellTypeLink';
+export { cellTypePhone } from './datagrid/cellTypePhone';
+export { cellTypeTag } from './datagrid/cellTypeTag';
+export type { DataGridProps } from './datagrid/DataGrid';
+export { default as DataGrid } from './datagrid/DataGrid';
+export { DataGridDetailContainer } from './datagrid/DataGridDetailContainer';
+export { useTableView } from './datagrid/useTableView';
+export { default as SwipeableDrawer } from './drawer/swipable/SwipeableDrawer';
+export { default as AssineOnlineIcon } from './icons/AssineOnlineIcon';
+export { default as BotConversaIcon } from './icons/BotConversaIcon';
+export { default as CheckIconLabel } from './icons/CheckIconLabel';
+export { default as N8nIcon } from './icons/N8nIcon';
+export { default as NuvemshopIcon } from './icons/NuvemshopIcon';
+export { RightTopDiagonalVector } from './icons/RightTopDiagonalVector';
+export { default as SocPanelIcon } from './icons/SocPanelIcon';
+export { default as WabizIcon } from './icons/WabizIcon';
+export { default as WakeIcon } from './icons/WakeIcon';
+export { default as Dropzone } from './import/Dropzone';
+export { default as DropzoneFile } from './import/DropzoneFile';
+export { default as ImportStepper } from './import/xlsx/ImportStepper';
+export { DEFAULT_QUEUE_ACTIONS, validateCell } from './import/xlsx/ImportUtils';
+export { default as Typography } from './mui/Typography';
+export type { MultiFactorConfirmModalProps } from './multifactor/MultiFactorConfirmModal';
+export { default as MultiFactorConfirmModal } from './multifactor/MultiFactorConfirmModal';
+export { default as CheckIcon } from './openpix/order/CheckIcon';
+export { default as ConfirmedIcon } from './openpix/order/ConfirmedIcon';
+export { default as EarnDiscount } from './openpix/order/discount/EarnDiscount';
+export { default as EarnCashback } from './openpix/order/EarnCashback';
+export { default as EarnGiftback } from './openpix/order/giftback/EarnGiftback';
+export { GiftbackRedeem } from './openpix/order/GiftbackRedeem';
+export { PayPixValueCompany } from './openpix/order/PayPixValueCompany';
+export { default as PixPaymentWoovi } from './openpix/order/PixPaymentWoovi';
+export { default as CopyQRCode } from './openpix/paymentLink/CopyQRCode';
+export { default as ErrorIcon } from './openpix/paymentLink/ErrorIcon';
+export { default as PaymentDeleted } from './openpix/paymentLink/PaymentDeleted';
+export { default as PaymentExpired } from './openpix/paymentLink/PaymentExpired';
+export { default as PaymentFooter } from './openpix/paymentLink/PaymentFooter';
+export { QRCodeWrapper } from './openpix/paymentLink/QrCodeResponsive';
+export { default as QrCodeShowButton } from './openpix/paymentLink/QrCodeShowButton';
+export { default as PaymentSuccess } from './openpix/paymentSuccess/PaymentSuccess';
+export { default as PaymentLinkRow } from './paymentLinkRow/PaymentLinkRow';
+export type { RadioCardProps } from './RadioCard/RadioCard';
+export { default as RadioCard } from './RadioCard/RadioCard';
+export { default as RewardTicket } from './rewardTicket/RewardTicket';
+export { default as Ribbon } from './ribbon/Ribbon';
+export { default as GlobalSearchField } from './search/GlobalSearchField';
+export type { SelectProps } from './select/Select';
+export { default as Select } from './select/Select';
+export { CardColumn } from './table/CardColumn';
+export { default as CardListVirtualized } from './table/CardListVirtualized';
+export { getCellCurrency } from './table/cells/getCellCurrency';
+export { CellDateTypeEnum, getCellDate } from './table/cells/getCellDate';
+export { getCellLink } from './table/cells/getCellLink';
+export {
+  default as TableToggleViewModel,
+  TableViewModelEnum,
+} from './table/TableToggleViewModel';
+export { Timeline } from './timeline/Timeline';
+export { TIMELINE_APPEVENT_DOMAIN_ICON } from './timeline/TimelineAppEventDomainIcon';
+export { TimelineAppEventItem } from './timeline/TimelineAppEventItem';
+export { TIMELINE_APPEVENT_TYPE_COLOR } from './timeline/TimelineAppEventTypeColor';
+export { TimelineItem } from './timeline/TimelineItem';
+export { default as ToggleButtonGroup } from './ToggleButtonGroup';
+export { default as UserChip } from './user/chip/UserChip';
+export { BrowserOnly } from './utils/BrowserOnly';
+export { WindowPopper } from './windowPopper/WindowPopper';

package/src/layoutWrapper/LayoutWrapper.tsx

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+import styled from 'styled-components';
+import { useWindowSize } from 'use-window-size-hook';
+
+import { useSidebar } from '../sidebar';
+// import LayoutRoot from './LayoutRoot';
+
+type Props = {
+  children: ReactNode;
+  header: ReactNode;
+  sidebar: ReactNode;
+};
+
+const Grid = styled.div`
+  display: grid;
+  grid-template-columns: ${(props) => (props.open ? '240px' : '0')} 1fr;
+  height: 100vh;
+  width: 100%;
+`;
+
+const LayoutWrapper = ({ header, sidebar, children }: Props) => {
+  const { isSidebarOpen } = useSidebar();
+  const { width } = useWindowSize();
+
+  const isMobile = width < 600;
+
+  if (isMobile) {
+    return (
+      <>
+        {header}
+        {sidebar}
+        {children}
+      </>
+    );
+  }
+
+  return (
+    <Grid open={isSidebarOpen}>
+      {sidebar}
+      <div style={{ minWidth: 0 }}>
+        {header}
+        {children}
+      </div>
+    </Grid>
+  );
+};
+
+export default LayoutWrapper;

package/src/layoutWrapper/LayoutWrapperFluid.tsx

@@ -0,0 +1,38 @@
+import { Grid } from '@mui/material';
+import type { ReactNode } from 'react';
+import { useWindowSize } from 'use-window-size-hook';
+
+import BoxFlex from '../mui/BoxFlex';
+
+type Props = {
+  children: ReactNode;
+  header: ReactNode;
+  sidebar: ReactNode;
+};
+
+const LayoutWrapperFluid = ({ header, sidebar, children }: Props) => {
+  const { width } = useWindowSize();
+
+  const isMobile = width < 600;
+
+  if (isMobile) {
+    return (
+      <Grid container>
+        {header}
+        {sidebar}
+        {children}
+      </Grid>
+    );
+  }
+
+  return (
+    <Grid container>
+      {header}
+      <BoxFlex sx={{ flexDirection: 'column', mt: '60px', flex: 1 }}>
+        {children}
+      </BoxFlex>
+    </Grid>
+  );
+};
+
+export default LayoutWrapperFluid;

package/src/logo/OpenPixLogoColor.tsx

@@ -0,0 +1,137 @@
+type Props = {
+  width?: string;
+  height?: string;
+  showText?: boolean;
+};
+
+export default ({ width, height = '40px', showText = true }: Props) => {
+  const fill1 = showText ? '#1F6D61' : '#fff';
+  const fill2 = showText ? '#308E83' : '#fff';
+  const fill3 = showText ? '#4AB7A8' : '#fff';
+  const fill4 = showText ? '#96969A' : '#fff';
+
+  return (
+    <svg
+      version='1.1'
+      id='OpenPixLogo'
+      data-testid='OpenPixLogo'
+      xmlns='http://www.w3.org/2000/svg'
+      x='0px'
+      y='0px'
+      width={width}
+      height={height}
+      viewBox='0 0 670.49 140.22'
+    >
+      <g fill={fill4} fillRule='nonzero' id='open'>
+        <polygon points='469.7,34.9 469.6,35.2 469.8,35' />
+        <path
+          d='M264.8,59.4c0,8.5-1.2,15.9-3.7,22.4c-2.5,6.5-5.8,11.9-10,16.2c-4.2,4.3-9.1,7.6-14.7,9.8
+				c-5.6,2.2-11.5,3.3-17.8,3.3c-6.3,0-12.2-1.1-17.8-3.3c-5.6-2.2-10.5-5.4-14.7-9.8c-4.2-4.3-7.6-9.7-10-16.2
+				c-2.5-6.5-3.7-13.9-3.7-22.4c0-8.5,1.2-15.9,3.7-22.3c2.5-6.4,5.8-11.8,10-16.1c4.2-4.3,9.1-7.6,14.7-9.8
+				c5.6-2.2,11.5-3.3,17.8-3.3c6.3,0,12.2,1.1,17.8,3.3c5.6,2.2,10.5,5.4,14.7,9.8c4.2,4.3,7.6,9.7,10,16.1
+				C263.5,43.5,264.8,51,264.8,59.4L264.8,59.4z M254.5,59.4c0-6.6-0.9-12.6-2.6-17.9c-1.7-5.3-4.1-9.8-7.3-13.5
+				c-3.1-3.7-6.9-6.5-11.3-8.5c-4.4-1.9-9.4-2.9-14.9-2.9c-5.5,0-10.5,1-14.9,2.9c-4.4,1.9-8.2,4.8-11.3,8.5
+				c-3.1,3.7-5.6,8.2-7.3,13.5c-1.7,5.3-2.6,11.2-2.6,17.9c0,6.7,0.9,12.6,2.6,17.9c1.7,5.3,4.1,9.8,7.3,13.5
+				c3.1,3.7,6.9,6.6,11.3,8.5c4.4,2,9.4,3,14.9,3c5.5,0,10.5-1,14.9-3c4.4-2,8.2-4.8,11.3-8.5c3.1-3.7,5.6-8.2,7.3-13.5
+				C253.6,72,254.5,66.1,254.5,59.4L254.5,59.4z'
+        />
+        <path
+          d='M289.7,135.2h-9.3V37.8c2.8-0.9,6.3-1.9,10.5-2.7c4.3-0.9,9.7-1.3,16.2-1.3c5.4,0,10.3,0.9,14.7,2.6
+				c4.4,1.8,8.2,4.3,11.4,7.6c3.2,3.3,5.6,7.4,7.4,12.1c1.8,4.7,2.6,10.1,2.6,16.1c0,5.6-0.7,10.8-2.2,15.5
+				c-1.5,4.7-3.6,8.7-6.5,12.1c-2.8,3.4-6.3,6-10.5,7.9c-4.1,1.9-8.9,2.8-14.2,2.8c-4.8,0-9-0.7-12.6-2.1c-3.6-1.4-6.2-2.7-7.8-3.9
+				V135.2z M289.7,95.6c0.9,0.7,1.9,1.4,3.2,2.1c1.3,0.8,2.8,1.5,4.5,2.1c1.7,0.7,3.6,1.2,5.6,1.6c2,0.4,4.1,0.6,6.3,0.6
+				c4.6,0,8.4-0.8,11.5-2.4c3.1-1.6,5.6-3.7,7.5-6.4c1.9-2.7,3.3-5.9,4.1-9.5c0.9-3.7,1.3-7.5,1.3-11.6c0-9.7-2.4-17.1-7.3-22.3
+				c-4.8-5.2-11.3-7.8-19.2-7.8c-4.6,0-8.2,0.2-11,0.6c-2.8,0.4-4.9,0.9-6.3,1.4V95.6z'
+        />
+        <path
+          d='M353.7,72c0-6.5,0.9-12.1,2.8-16.9c1.9-4.8,4.3-8.8,7.3-12c3-3.2,6.4-5.6,10.3-7.2c3.8-1.6,7.8-2.4,11.9-2.4
+				c9,0,16.2,2.9,21.6,8.8c5.4,5.9,8.1,15,8.1,27.2c0,0.8,0,1.5-0.1,2.3c0,0.8-0.1,1.5-0.2,2.1h-51.7c0.3,9,2.5,16,6.7,20.8
+				c4.2,4.8,10.8,7.3,19.9,7.3c5,0,9-0.5,12-1.4c2.9-0.9,5.1-1.8,6.4-2.4l1.7,8c-1.3,0.8-3.8,1.7-7.5,2.7c-3.7,1-8,1.6-12.9,1.6
+				c-6.5,0-12-1-16.5-2.9c-4.6-1.9-8.3-4.6-11.3-8c-2.9-3.4-5.1-7.5-6.4-12.2C354.3,82.7,353.7,77.6,353.7,72L353.7,72z M406,66.1
+				c-0.2-7.7-2-13.7-5.4-18c-3.4-4.3-8.3-6.4-14.5-6.4c-3.3,0-6.3,0.7-8.9,2c-2.6,1.3-4.9,3.1-6.8,5.3c-1.9,2.2-3.5,4.8-4.6,7.8
+				c-1.1,2.9-1.7,6-1.9,9.3H406z'
+        />
+        <path
+          d='M430.7,37.8c2.8-0.8,6.5-1.6,11.1-2.6c4.7-0.9,10.4-1.4,17.1-1.4c5.6,0,10.3,0.8,14,2.4
+				c3.8,1.6,6.7,3.9,9,6.9c2.2,3,3.8,6.6,4.8,10.8c0.9,4.2,1.4,8.8,1.4,13.8v41.2h-9.3V70.7c0-5.2-0.4-9.6-1.1-13.3
+				c-0.7-3.6-1.9-6.6-3.6-8.8c-1.7-2.3-3.8-3.9-6.6-4.9c-2.7-1-6.1-1.5-10.2-1.5c-4.4,0-8.1,0.2-11.3,0.7c-3.2,0.5-5.3,0.9-6.2,1.3
+				v64.7h-9.3V37.8z'
+        />
+      </g>
+
+      <g fill={fill3} fillRule='nonzero' id='pix'>
+        <path
+          d='M532.1,19.1c12.8,0,22.3,2.4,28.5,7.3c6.3,4.9,9.4,11.8,9.4,20.7c0,5.1-0.9,9.5-2.7,13.1
+					c-1.8,3.6-4.4,6.5-7.8,8.7c-3.4,2.2-7.5,3.8-12.4,4.8c-4.9,1-10.4,1.5-16.6,1.5h-12.2v34.9h-8.9V21.6c3.1-0.9,6.8-1.5,11-1.9
+					C524.6,19.3,528.5,19.1,532.1,19.1z M532.5,26.8c-3.3,0-6.1,0.1-8.4,0.3c-2.3,0.2-4.3,0.4-5.9,0.6v39.9h11.2
+					c4.8,0,9.1-0.3,13-0.8c3.9-0.6,7.2-1.6,9.9-3.1c2.7-1.5,4.8-3.6,6.3-6.3c1.5-2.7,2.2-6.1,2.2-10.3c0-4-0.8-7.3-2.4-9.9
+					c-1.6-2.6-3.7-4.7-6.4-6.2c-2.6-1.5-5.7-2.6-9.1-3.2C539.6,27.1,536.1,26.8,532.5,26.8z'
+        />
+        <path
+          d='M599,22.5c0,2-0.6,3.6-1.8,4.8c-1.2,1.2-2.7,1.8-4.4,1.8c-1.7,0-3.2-0.6-4.4-1.8c-1.2-1.2-1.8-2.8-1.8-4.8
+					c0-2,0.6-3.6,1.8-4.8c1.2-1.2,2.7-1.8,4.4-1.8c1.7,0,3.2,0.6,4.4,1.8C598.3,19,599,20.5,599,22.5z M597,110.2h-8.5V42.9h8.5
+					V110.2z'
+        />
+        <path
+          d='M643,81.7c-1.9,2.3-3.8,4.7-5.7,7.2c-1.9,2.5-3.7,5-5.5,7.4c-1.8,2.4-3.4,4.9-4.9,7.4
+					c-1.5,2.5-2.7,4.7-3.7,6.6h-8.8c3.6-6.6,7.5-12.8,11.6-18.4c4.1-5.6,8.2-11.1,12.5-16.5l-22.8-32.4h9.9l17.6,25.5l17.6-25.5h9.2
+					l-22.3,32c1.9,2.4,3.9,4.9,6.1,7.7c2.2,2.8,4.3,5.7,6.5,8.7c2.2,3,4.2,6.1,6.3,9.3c2,3.2,3.9,6.4,5.6,9.6h-9.1
+					c-1-1.9-2.3-4-3.8-6.3c-1.5-2.3-3.1-4.7-4.9-7.2c-1.8-2.5-3.7-5-5.6-7.6C646.8,86.5,644.9,84,643,81.7z'
+        />
+      </g>
+      <g>
+        <path
+          fill={fill1}
+          d='M134.8,93.9c-0.8-1.2-1.9-2.2-3.3-3l-11.4-6.2l-7.9-4.3l-7.9,4.3l7.9,4.3l9.9,5.4c2.9,1.6,2.9,5.1,0,6.7
+				l-43.8,24c-3.5,1.9-8.2,1.9-11.7,0l-43.8-24.1c-2.9-1.6-2.9-5.1,0-6.7l9.8-5.4l7.9-4.3l-7.9-4.3l-7.9,4.3l-11.4,6.2
+				c-2.8,1.6-4.5,4.1-4.5,6.9c0,1.4,0.4,2.7,1.2,3.8c0.8,1.2,1.9,2.2,3.3,3l53.3,29.2c3.5,1.9,8.2,1.9,11.7,0l53.2-29.2
+				c2.8-1.6,4.5-4.1,4.5-6.9C136,96.4,135.6,95.1,134.8,93.9z'
+        />
+        <path
+          fill={fill2}
+          d='M134.8,67.7c-0.8-1.2-1.9-2.2-3.3-3l-11.4-6.2l-7.9-4.3l-7.9,4.3l7.9,4.3l9.9,5.4c2.9,1.6,2.9,5.1,0,6.7
+				l-9.8,5.4l-7.9,4.3L78.3,99c-3.5,1.9-8.2,1.9-11.7,0L40.5,84.7l-7.9-4.3l-9.9-5.4c-2.9-1.6-2.9-5.1,0-6.7l9.8-5.4l7.9-4.3
+				l-7.9-4.3l-7.9,4.3l-11.4,6.2c-2.8,1.6-4.5,4.1-4.5,6.9c0,1.4,0.4,2.7,1.2,3.9c0.8,1.2,1.9,2.2,3.3,3l11.4,6.2l7.9,4.3l34,18.6
+				c3.5,1.9,8.2,1.9,11.7,0L112.2,89l7.9-4.3l11.4-6.2c2.8-1.6,4.5-4.1,4.5-6.9C136,70.2,135.6,68.9,134.8,67.7z'
+        />
+        <path
+          fill={fill3}
+          d='M134.8,41.6c-0.8-1.2-1.9-2.2-3.3-3L78.3,9.5c-3.5-1.9-8.2-1.9-11.7,0L13.3,38.6c-2.8,1.6-4.5,4.1-4.5,6.9
+				c0,1.4,0.4,2.7,1.2,3.8c0.8,1.2,1.9,2.2,3.3,3l11.4,6.2l7.9,4.3l34,18.6c3.5,1.9,8.2,1.9,11.7,0l33.9-18.6l7.9-4.3l11.4-6.2
+				c2.8-1.6,4.5-4.1,4.5-6.9C136,44.1,135.6,42.8,134.8,41.6z M122.1,48.8l-9.8,5.4l-7.9,4.3l-26,14.3c-3.5,1.9-8.2,1.9-11.7,0
+				L40.5,58.5l-7.9-4.3l-9.9-5.4c-2.9-1.6-2.9-5.1,0-6.7l43.8-24c3.5-1.9,8.2-1.9,11.7,0l43.8,24.1C125,43.8,125,47.2,122.1,48.8z'
+        />
+        <g fill={fill1}>
+          <path
+            d='M65.8,44.1c-3.3-2-6.6-3.9-9.9-5.9c-1.2-0.7-2.4-1.1-3.8-1c-0.8-0.1-1.5,0.1-2.2,0.5
+						c-3.7,2.2-7.5,4.4-11.3,6.7c-1.4,0.8-1.4,2,0,2.8c3.7,2.1,7.4,4.1,11.1,6.3c2.2,1.3,4.4,1.1,6.6,0c3.2-1.8,6.3-3.7,9.5-5.5
+						C67.6,46.9,67.6,45.2,65.8,44.1z M58.4,46.4l-5.6,3.1c-0.2,0.1-0.5,0.1-0.8,0l-5.6-3.2c-0.5-0.3-0.5-1.1,0-1.4l5.7-3.2
+						c0.2-0.1,0.6-0.1,0.8,0l5.5,3.2C58.9,45.4,58.9,46.1,58.4,46.4z'
+          />
+          <path
+            d='M86.3,56.4L74.1,49c-0.8-0.5-1.7-0.5-2.5,0L59,56.2c-0.9,0.5-0.9,1.8,0,2.3l11.3,6.6c1.5,0.8,3.2,0.8,4.7,0
+					l11.3-6.5C87.2,58.2,87.2,56.9,86.3,56.4z M78.9,58l-6,3.4c-0.2,0.1-0.4,0.1-0.6,0l-6-3.5c-0.4-0.2-0.4-0.8,0-1.1l5.8-3.3
+					c0.4-0.2,0.8-0.2,1.1,0L79,57C79.4,57.2,79.4,57.8,78.9,58z'
+          />
+          <path
+            d='M86.6,33.1l-12.3-7.9c-0.8-0.5-1.8-0.5-2.6,0L59,32.3c-1.2,0.7-1.4,2.6-0.2,3.3l11.9,7c1.2,0.7,2.8,0.7,4,0
+					l11.8-6.4C87.7,35.5,87.7,33.8,86.6,33.1z M78.6,34.9l-5,2.7c-0.5,0.3-1.2,0.3-1.7,0l-5.1-3c-0.5-0.3-0.4-1.1,0.1-1.4l5.4-3
+					c0.3-0.2,0.8-0.2,1.1,0l5.3,3.4C79.1,33.9,79.1,34.6,78.6,34.9z'
+          />
+          <path
+            d='M87.1,52.3l3.5,2.2c0.9,0.7,2.1,0.7,3.1,0.1l3.3-2c0.8-0.5,0.8-1.6,0-2.1l-4-2.5c-0.4-0.2-0.8-0.2-1.2,0
+					l-4.7,2.6C86.6,50.9,86.5,51.8,87.1,52.3z'
+          />
+          <path
+            d='M96.7,46.7l3.4,2.2c0.9,0.6,2.1,0.6,3,0.1l3.6-2.2c0.5-0.3,0.6-1.1,0-1.5l-3.7-2.3c-0.7-0.5-1.7-0.5-2.4,0
+					l-3.8,2.2C96.2,45.5,96.1,46.3,96.7,46.7z'
+          />
+          <path
+            d='M87.6,41l4.2,2.9c0.7,0.5,1.5,0.5,2.2,0l4.3-2.8c0.4-0.3,0.4-0.8,0-1.1l-4.5-2.8c-0.6-0.4-1.3-0.4-1.9,0
+					l-4.3,2.6C87.2,40.2,87.2,40.7,87.6,41z'
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};

package/src/logo/WooviLogo.tsx

@@ -0,0 +1,46 @@
+type Props = {
+  width?: string;
+  height?: string;
+  color?: string;
+};
+
+const WooviLogo = ({ width, height = '40px', color = '#03D69D' }: Props) => {
+  return (
+    <svg
+      id='WooviLogo'
+      data-testid='WooviLogo'
+      width={width}
+      height={height}
+      viewBox='0 0 124 37'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <g id='Group'>
+        <path
+          id='Vector'
+          d='M101.243 35.5452C99.1586 35.5452 97.2858 34.3098 96.5084 32.3684L89.4766 15.5312C88.5932 13.4133 90.148 11.1189 92.4095 11.1189C93.7169 11.1189 94.883 11.8955 95.3777 13.1309L101.243 27.709L107.109 13.1309C107.604 11.9308 108.77 11.1189 110.077 11.1189C112.374 11.1189 113.894 13.4486 113.01 15.5312L105.978 32.4037C105.201 34.3098 103.328 35.5452 101.243 35.5452Z'
+          fill={color}
+        />
+        <path
+          id='Vector_2'
+          d='M122.833 1.16484C123.575 1.9414 123.964 2.82386 123.964 3.8828C123.964 4.94175 123.575 5.8595 122.833 6.56546C122.091 7.27143 121.137 7.62441 120.042 7.62441C118.911 7.62441 117.957 7.27143 117.215 6.56546C116.473 5.8595 116.12 4.94175 116.12 3.8828C116.12 2.82386 116.508 1.9414 117.25 1.16484C117.992 0.38828 118.946 0 120.042 0C121.137 0 122.091 0.38828 122.833 1.16484ZM116.791 32.3331V14.3664C116.791 12.6015 118.24 11.1542 120.007 11.1542C121.773 11.1542 123.222 12.6015 123.222 14.3664V32.2978C123.222 34.0628 121.773 35.51 120.007 35.51C118.24 35.5453 116.791 34.0981 116.791 32.3331Z'
+          fill={color}
+        />
+        <g id='Group_2'>
+          <path
+            id='Vector_3'
+            d='M23.8226 35.5453C21.8792 35.5453 20.2184 34.2746 19.7237 32.4391L16.5081 20.5083L13.2572 32.4391C12.7625 34.2746 11.1017 35.5453 9.1936 35.5453C7.32081 35.5453 5.66002 34.3099 5.12998 32.4744L0.112297 14.9665C-0.41774 13.0957 0.995693 11.2249 2.93916 11.2249C4.24659 11.2249 5.41267 12.1073 5.76603 13.378L9.40562 26.5443L12.8332 13.9781C13.2926 12.3544 14.7413 11.2249 16.4374 11.2249C18.1336 11.2249 19.6177 12.3544 20.0417 13.9781L23.4693 26.5443L27.1089 13.378C27.4622 12.1073 28.6283 11.2249 29.9357 11.2249H30.0417C31.9852 11.2249 33.3986 13.0957 32.8686 14.9665L27.8863 32.5097C27.3916 34.3099 25.7308 35.5453 23.8226 35.5453Z'
+            fill={color}
+          />
+        </g>
+        <path
+          id='Vector_4'
+          d='M53.7168 25.6265C55.4482 27.3561 57.0383 28.9446 58.6285 30.533C55.0242 34.9453 50.5366 37.6632 44.5648 36.5337C39.0171 35.4747 35.3775 32.0508 33.9287 26.5443C32.4093 20.7201 35.0948 14.6841 40.2892 11.719C45.4835 8.754 51.9853 9.53056 56.261 13.731C61.0313 18.3904 65.6956 23.1557 70.4306 27.8503C72.8688 30.2506 76.4731 30.533 79.0879 28.5916C82.0208 26.4031 82.5508 22.1673 80.2893 19.3082C77.9925 16.449 73.7522 15.9901 70.996 18.3904C70.0419 19.2023 69.2645 20.2259 68.4518 21.1437C66.685 19.3788 65.0949 17.7903 63.5048 16.2019C67.0031 11.8955 71.42 8.96579 77.9925 10.2718C83.4695 11.3308 87.5332 15.8136 88.4519 21.426C89.3353 26.9326 86.4378 32.6156 81.3847 35.2629C76.2257 37.9456 69.9713 37.0278 65.7663 32.898C61.0666 28.2386 56.4023 23.5439 51.7026 18.8846C49.6885 16.8726 46.8616 16.2725 44.3881 17.4021C41.8793 18.5316 40.5012 20.5083 40.4658 23.2969C40.4305 26.0501 41.7026 28.1327 44.2114 29.2975C46.7556 30.4624 49.1585 30.1094 51.2786 28.2739C52.1973 27.4267 52.9394 26.4737 53.7168 25.6265Z'
+          fill={color}
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default WooviLogo;

package/src/mui/BoxFlex.tsx

@@ -0,0 +1,27 @@
+import { Box } from '@mui/material';
+import type { BoxProps } from '@mui/material';
+import { forwardRef } from 'react';
+import type { ReactNode } from 'react';
+
+type MuiFlexProps = {
+  children: ReactNode;
+  tabIndex?: number;
+  sx?: BoxProps['sx'];
+  'data-testid'?: string;
+};
+
+const BoxFlex = forwardRef(
+  ({ children, sx, tabIndex, ...props }: MuiFlexProps, ref) => (
+    // @todo: Fix the order of styles here, to imply that every BoxFlex will have flex display.
+    (<Box
+      ref={ref}
+      tabIndex={tabIndex}
+      data-testid={props['data-testid']}
+      sx={{ display: 'flex', ...sx }}
+    >
+      {children}
+    </Box>)
+  ),
+);
+
+export default BoxFlex;

package/src/mui/Typography.tsx

@@ -0,0 +1,8 @@
+import { default as _Typography } from '@mui/material/Typography';
+import type { TypographyProps } from '@mui/material/Typography/Typography';
+
+const Typography = ({ variant, children }: TypographyProps) => {
+  return <_Typography variant={variant}>{children}</_Typography>;
+};
+
+export default Typography;

package/src/mui/__stories__/Typography.stories.tsx

@@ -0,0 +1,14 @@
+import type { Story } from '@storybook/addon-docs/blocks';
+import type { Meta } from '@storybook/react/types-6-0';
+
+import type { TypographyProps } from '../ActionButton';
+import TypographyExample from './TypographyExample';
+
+export default {
+  title: 'Ui/Typography',
+  component: TypographyExample,
+} as Meta;
+
+const Template: Story<TypographyProps> = () => <TypographyExample />;
+
+export const Default = Template.bind({});