@pareto-engineering/design-system 5.2.1 → 5.4.0

package/src/stories/test/QueryLoader.stories.jsx

@@ -1,36 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { QueryLoader } from 'ui'
-
-import {
-  RelayEnvironmentProvider,
-  mockRelayOperation,
-} from '../utils/relay'
-
-export default {
-  title        :'test/QueryLoader',
-  component    :QueryLoader,
-  subcomponents:{
-    // Item:QueryLoader.Item
-  },
-  decorators:[
-    // storyfn => <div className="">{ storyfn() }</div>,
-    (storyfn) => (
-      <RelayEnvironmentProvider>
-        { storyfn() }
-      </RelayEnvironmentProvider>
-    ),
-  ],
-  argTypes:{
-    backgroundColor:{ control: 'color' },
-  },
-}
-
-export const Base = () => {
-  mockRelayOperation()
-
-  return (
-    <QueryLoader />
-  )
-}

package/src/stories/utils/Router.jsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import { HashRouter as Router } from 'react-router-dom'
-// import { createBrowserHistory } from 'history'
-
-// const history = createBrowserHistory()
-
-const TestRouter = (props) => (
-  <Router
-    // history={history}
-    {...props}
-  />
-)
-
-/*
-export {
-  TestRouter as Router,
-  history,
-} */
-
-export default TestRouter

package/src/stories/utils/generateNodeId.js

@@ -1,12 +0,0 @@
-/* eslint-disable no-bitwise */
-/* eslint-disable no-mixed-operators */
-const uuidv4 = () => ([1e7] + -1e3 + -4e3 + -8e3 + -1e11)
-  .replace(
-    /[018]/g,
-    (c) => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4)
-      .toString(16),
-  )
-
-const generateNodeId = (objectNode) => btoa(`${objectNode}:${uuidv4()}`)
-
-export default generateNodeId

package/src/stories/utils/lorem.js

@@ -1,15 +0,0 @@
-export default `Lorem ipsum dolor sit amet consectetur adipisicing elit. Est cupiditate temporibus quos officia, incidunt nesciunt dolorum eligendi, aspernatur voluptates sequi natus tempora autem molestias, illo reprehenderit mollitia. Voluptas, quaerat sequi?
-       Magnam excepturi impedit odit consectetur quaerat, provident, quod facere, ipsa distinctio quae expedita! Doloribus adipisci harum dicta nulla commodi cum incidunt dignissimos? Id accusantium quos ullam placeat necessitatibus. Mollitia, debitis?
-       Repudiandae odio alias odit vel voluptatibus officiis, quod praesentium adipisci, in optio voluptate magnam? Ab saepe maxime, corrupti dolore natus quis accusantium hic iste ullam harum repellat sint commodi cum?
-       Vero et accusamus voluptatibus exercitationem, perspiciatis nisi tempora, autem consectetur deserunt ex fugiat cum iure sed dolore, perferendis eos quia voluptate. Ratione autem minus quas iure dicta doloribus ad nulla!
-       Saepe, ipsum nisi impedit similique vel eligendi ex quidem ea rem officiis praesentium dolores ipsa sit cumque eaque distinctio soluta qui dolore veniam accusamus facilis voluptas minus. Animi, sequi necessitatibus?
-       Explicabo in nisi, id rerum omnis doloribus error! Delectus quasi consequuntur, adipisci tempore eaque, ad ipsa porro consectetur natus architecto iure aut aliquid tenetur totam unde illum saepe, ipsum deserunt!
-       Dicta assumenda odit eius tempora illo veniam ea ab enim? Maxime suscipit quae quas sunt eveniet tempora nesciunt, itaque aliquam deserunt culpa eius enim asperiores eum beatae dolore modi sit.
-       Exercitationem aliquid dicta dolorum sequi odit beatae vitae velit architecto, atque ratione quaerat distinctio eaque voluptatibus voluptate nihil, quibusdam porro, eveniet nostrum voluptas. Sed ex facere, illum dolorum soluta blanditiis.
-       Est possimus reprehenderit fugit asperiores dolores deserunt officia quo, sed dignissimos at inventore nulla officiis quaerat? Quia quam consequuntur aliquid! Laborum suscipit voluptate quod et officia dicta voluptatum odio impedit.
-       Voluptate blanditiis nobis cum non sunt nisi, magni dignissimos qui repellat facilis labore, commodi eveniet totam velit voluptatibus ipsa omnis delectus quod incidunt veniam. Quibusdam amet voluptatum eos reiciendis ullam!
-       Eaque quas laudantium repudiandae quidem similique totam delectus fugit, iusto a vero molestias placeat nisi aspernatur corporis blanditiis excepturi. Illo inventore consectetur ullam magnam labore minus a ex laboriosam iusto.
-       Mollitia deserunt modi neque asperiores temporibus cum quae numquam quidem! Quisquam sequi nisi sed accusamus velit consectetur omnis iusto. Laudantium omnis sunt eius laborum quia iusto minima excepturi officiis veniam.
-       Laboriosam laborum praesentium sunt molestias. Consectetur, fugit laudantium. Facilis odit illum deserunt beatae at alias. Quaerat, quam facere quis, iure autem veniam maiores impedit ea rerum, totam officiis eveniet eum.
-       Maxime, nostrum? Adipisci provident eius cupiditate necessitatibus similique debitis sed amet, suscipit doloribus dicta? Numquam optio mollitia facere eligendi, culpa quibusdam accusamus rerum minus iure, sequi, necessitatibus sunt quas ratione?
-       Delectus, sit architecto ab labore temporibus sunt reiciendis nihil. Ea quaerat numquam molestiae, nostrum, similique adipisci molestias esse beatae incidunt vero ex tempora! Recusandae temporibus, vero saepe fugiat voluptatem asperior`

package/src/stories/utils/relay/EnvironmentProvider.jsx

@@ -1,14 +0,0 @@
-import React from 'react'
-import { RelayEnvironmentProvider } from 'react-relay/hooks'
-
-import environment from './environment'
-
-const RelayEnvProvider = (props) => (
-  <RelayEnvironmentProvider
-    environment={environment}
-    // history={history}
-    {...props}
-  />
-)
-
-export default RelayEnvProvider

package/src/stories/utils/relay/environment.js

@@ -1,5 +0,0 @@
-import { createMockEnvironment } from 'relay-test-utils'
-
-const environment = createMockEnvironment()
-
-export default environment

package/src/stories/utils/relay/index.js

@@ -1,4 +0,0 @@
-export { default as RelayEnvironmentProvider } from './EnvironmentProvider'
-export { default as environment } from './environment'
-export { default as mockResolvers } from './mockResolvers'
-export { default as mockRelayOperation } from './mockRelayOperation'

package/src/stories/utils/relay/mockRelayOperation.js

@@ -1,14 +0,0 @@
-import { MockPayloadGenerator } from 'relay-test-utils'
-import relayEnvironment from './environment'
-import mockResolvers from './mockResolvers'
-
-function mockRelayOperation(overrideMockResolvers = null) {
-  relayEnvironment.mock.queueOperationResolver(
-    (operation) => MockPayloadGenerator.generate(
-      operation,
-      overrideMockResolvers || mockResolvers,
-    ),
-  )
-}
-
-export default mockRelayOperation

package/src/stories/utils/relay/mockResolvers.js

@@ -1,299 +0,0 @@
-const customMockResolvers = {
-  String  :() => 'Test string',
-  UserNode:() => ({
-    id         :'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
-    firstName  :'Collins',
-    isSuperuser:false,
-  }),
-  TaskNode:() => ({
-    id    :'VGFza05vZGU6MDAwZmQ4N2UtYjNlNS00NWE5LTg5ZjEtNWI0ZDViNWE2NTlj',
-    title :'Task1',
-    status:{
-      id    :'VGFza1N0YXR1c05vZGU6OTczYmM4NTgtMzA0NC00NWNiLTg2MDQtYTRhM2JmNjFmZjEx',
-      status:'In Review',
-    },
-    requester:{
-      id       :'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
-      firstName:'Collins',
-    },
-    userTeam:{
-      id  :'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
-      name:'Team 1',
-    },
-    manager:{
-      id       :'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
-      firstName:'manager',
-    },
-    createdAt  :'2021-09-23',
-    dueDate    :'2021-10-30',
-    requestDate:'2020-01-01',
-    description:'First task',
-  }),
-  TeamNode:() => ({
-    id          :'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
-    name        :'Team 1',
-    credits     :20.12,
-    billingEmail:'team1@hellopareto.com',
-    hourlyRate  :20,
-    partner     :{
-      firstName:'Test1',
-      lastName :'assd',
-    },
-
-  }),
-  GroupNode:() => ({
-    id  :'VGFza05vZGU6MDAwZmQ4N2UtYjNlNS00NWE5LTg5ZjEtNWI0ZDViNWE2NTlk',
-    name:'admin',
-  }),
-  TaskNodeConnection:() => ({
-    pageInfo:{
-      hasNextPage    :true,
-      hasPreviousPage:true,
-    },
-    edges:[
-      {
-        node:{
-          id    :'VGFza05vZGU6MDAwZmQ4N2UtYjNlNS00NWE5LTg5ZjEtNWI0ZDViNWE2NTlj',
-          title :'Task1',
-          status:{
-            id    :'VGFza1N0YXR1c05vZGU6OTczYmM4NTgtMzA0NC00NWNiLTg2MDQtYTRhM2JmNjFmZjEx',
-            status:'In Review',
-          },
-          requester:{
-            id       :'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
-            firstName:'Collins',
-          },
-          userTeam:{
-            id  :'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
-            name:'Team 1',
-          },
-          manager:{
-            id       :'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
-            firstName:'manager',
-          },
-          createdAt  :'2021-09-23',
-          dueDate    :'2021-10-30',
-          requestDate:'2020-01-01',
-          description:'First task',
-        },
-      },
-      {
-        node:{
-          id    :'VGFza05vZGU6MDAwZmQ4N2UtYjNlNS00NWE5LTg5ZjEtNWI0ZDViNWE2NTlj',
-          title :'Task2',
-          status:{
-            id    :'VGFza1N0YXR1c05vZGU6OTczYmM4NTgtMzA0NC00NWNiLTg2MDQtYTRhM2JmNjFmZjEx',
-            status:'In Review',
-          },
-          requester:{
-            id       :'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
-            firstName:'Collins',
-          },
-          userTeam:{
-            id  :'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
-            name:'Team 2',
-          },
-          manager:{
-            id       :'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
-            firstName:'manager',
-          },
-          createdAt  :'2021-09-23',
-          dueDate    :'2021-10-30',
-          requestDate:'2020-01-01',
-          description:'Second task',
-        },
-      },
-    ],
-  }),
-  UserNodeConnection:(allArgs) => {
-    const { args :{ first, offset } } = allArgs
-
-    const edges = [
-      {
-        node:{
-          id       :'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
-          firstName:'Collins',
-        },
-      },
-      {
-        node:{
-          id       :'VXNlck5vZGU6MDEyN2E1NmItYjAxOS00NmQxLTg2NTEtYWEzOGIxZTUwNTA5',
-          firstName:'Amritha',
-        },
-      },
-      {
-        node:{
-          id       :'VXNlck5vZGU6YzcwYWIxMDItZWE2Yy00ZWNhLTk0M2ItOTA2OWQwN2RiMDQ0',
-          firstName:'Marsya',
-        },
-      },
-      {
-        node:{
-          id       :'VXNlck5vZGU6OTUyNjg1NWYtZTg3NC00ZTlkLWFlZTgtZDZjODc3NDNlNTRh',
-          firstName:'James',
-        },
-      },
-      {
-        node:{
-          id       :'VXNlck5vZGU6OTFmOTE4NTYtNjg0Yi00ODhhLWE0YzktZGU5ZDQ5YmJjM2Mz',
-          firstName:'Adrian',
-        },
-      },
-      {
-        node:{
-          id       :'VXNlck5vZGU6OTNkZGU3NGEtYTA2Yi00MDMzLWIwMDAtMTFkZDY0N2Y3OWE4',
-          firstName:'Melissa',
-        },
-      },
-      {
-        node:{
-          id       :'VXNlck5vZGU6MjgyYTk1MjctMDI4OS00MDlhLWFjNTktYWJkNTFkODAyMjFj',
-          firstName:'Beto',
-        },
-      },
-      {
-        node:{
-          id       :'VXNlck5vZGU6YmIxYzI5YmEtYTk0OS00M2I3LWIxMWEtZDQxMjM5ZWI0ZWI2',
-          firstName:'Romie',
-        },
-      },
-      {
-        node:{
-          id       :'VXNlck5vZGU6ZjZhNzBiZTgtY2FkMC00NzNjLWEyODUtNDdkMGVmYjQxYTRl',
-          firstName:'Miguel',
-        },
-      },
-      {
-        node:{
-          id       :'VXNlck5vZGU6Y2JlOGM4ZTYtY2Q2Zi00M2RlLWI4YmQtODU3YWRhZjYyMzVj',
-          firstName:'Phoebe',
-        },
-      },
-      {
-        node:{
-          id       :'VXNlck5vZGU6NDA5MWM1MDUtYjY1MC00M2Y1LTg3NTEtMDc1NTBkMzJhYTcy',
-          firstName:'Kim',
-        },
-      },
-      {
-        node:{
-          id       :'VXNlck5vZGU6ZjE0MGUxYTItM2I4My00NmY1LWIzMDQtYmFiOGZjMTc5ZmU4',
-          firstName:'Liz',
-        },
-      },
-      {
-        node:{
-          id       :'VXNlck5vZGU6ZGYyOGE5MDYtM2NhMS00NTVmLWIzZmUtNjY5YWFkZTNiZjRk',
-          firstName:'Deepanshu',
-        },
-      },
-      {
-        node:{
-          id       :'VXNlck5vZGU6MjBhMDBkYjgtZDExNi00YzAyLWEyOTUtYWM5MzIwMjUwMWU3',
-          firstName:'Jennica',
-        },
-      },
-      {
-        node:{
-          id       :'VXNlck5vZGU6MjczNDllYjMtYzNmYi00ZmVkLWE1N2YtNTFjZGJlODI0MWU2',
-          firstName:'Michelle',
-        },
-      },
-    ]
-
-    return ({
-      pageInfo:{
-        hasNextPage    :true,
-        hasPreviousPage:true,
-      },
-      edges:edges.slice(offset, offset + first),
-    })
-  },
-  WorkHoursNodeConnection:() => ({
-    pageInfo:{
-      hasNextPage    :true,
-      hasPreviousPage:true,
-    },
-    edges:[
-      {
-        node:{
-          id       :'V29ya0hvdXJzTm9kZTplYWJlYmEyNC0wNTlmLTQxMjEtODIzYi0yYmU2YzMxMmZlNzA=',
-          associate:{
-            firstName:'Des',
-            lastName :'assd',
-          },
-          timeSpent  :15,
-          log        :'asd',
-          paidOut    :false,
-          sentInvoice:true,
-          createdAt  :'2021-09-05T17:08:49.000-0430',
-          startedAt  :'2021-09-05T17:08:49.000-0430',
-        },
-      },
-      {
-        node:{
-          id       :'V29ya0hvdXJzTm9kZTplYmZiZTllZS04NWNkLTRhNDktYTZhMi0zNmNhMTU0M2EwMDU=',
-          associate:{
-            firstName:'Ella',
-            lastName :'asdasd',
-          },
-          timeSpent  :25,
-          log        :'aasdasdsd',
-          paidOut    :true,
-          sentInvoice:false,
-          createdAt  :'2021-09-15T17:08:49.000-0430',
-          startedAt  :'2021-09-15T17:08:49.000-0430',
-        },
-      },
-    ],
-  }),
-  TeamNodeConnection:() => ({
-    pageInfo:{
-      hasNextPage    :true,
-      hasPreviousPage:true,
-    },
-    edges:[
-      {
-        node:{
-          id          :'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
-          name        :'Team 1',
-          credits     :20.12,
-          billingEmail:'team1@hellopareto.com',
-          hourlyRate  :20,
-          partner     :{
-            firstName:'Test1',
-            lastName :'assd',
-          },
-        },
-      },
-      {
-        node:{
-          id          :'VGVhbU5vZGU6MDA0N2U4MzktODY0Zi00N2U5LTg3ZjgtZGUwMmM2Yzg1YWJm',
-          name        :'Team 2',
-          credits     :20.12,
-          billingEmail:'team2@hellopareto.com',
-          hourlyRate  :20,
-          partner     :{
-            firstName:'Test2',
-            lastName :'assd',
-          },
-        },
-      },
-      {
-        node:{
-          id          :'VGVhbU5vZGU6MDExMmEyZmEtYzE0YS00MGRhLThiNWQtMDMzNTkyNDQ3ZDI2',
-          name        :'Team 3',
-          credits     :20.12,
-          billingEmail:'team3@hellopareto.com',
-          hourlyRate  :20,
-          partner     :{
-            firstName:'Test3',
-            lastName :'assd',
-          },
-        },
-      },
-    ],
-  }),
-}
-
-export default customMockResolvers

package/src/stories/utils/testData.js

@@ -1,63 +0,0 @@
-export const fruits = [
-  'Apple',
-  'Apricot',
-  'Avocado',
-  'Banana',
-  'Bilberry',
-  'Blackberry',
-  'Blackcurrant',
-  'Blueberry',
-  'Currant',
-  'Cherry',
-  'Cherimoya',
-  'Clementine',
-  'Date',
-  'Damson',
-  'Durian',
-  'Eggplant',
-  'Elderberry',
-  'Feijoa',
-  'Gooseberry',
-  'Grape',
-  'Grapefruit',
-  'Guava',
-  'Huckleberry',
-  'Jackfruit',
-  'Jambul',
-  'Kiwi fruit',
-  'Kumquat',
-  'Legume',
-  'Lemon',
-  'Lime',
-  'Lychee',
-  'Mango',
-  'Mangostine',
-  'Melon',
-  'Cantaloupe',
-  'Honeydew melon',
-  'Rock melon',
-  'Nectarine',
-  'Orange',
-  'Peach',
-  'Pear',
-  'Williams pear or Bartlett pear',
-  'Pitaya',
-  'Physalis',
-  'Plum/prune (dried plum)',
-  'Pineapple',
-  'Pomegranate',
-  'Raisin',
-  'Raspberry',
-  'Western raspberry (blackcap)',
-  'Rambutan',
-  'Redcurrant',
-  'Salal berry',
-  'Satsuma',
-  'Star fruit',
-  'Strawberry',
-  'Tangerine',
-  'Tomato',
-  'Ugli fruit',
-  'Watermelon',
-  'Ziziphus mauritiana',
-]

package/src/ui/a/AnimatedBlobs/AnimatedBlobs.jsx

@@ -1,96 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import PropTypes from 'prop-types'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-import './styles.scss'
-
-// Local Definitions
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'animated-blobs'
-
-/**
- * This is the component description.
- */
-const AnimatedBlobs = ({
-  id,
-  className: userClassName,
-  color,
-  style,
-  height,
-  width,
-  opacity,
-  // ...otherProps
-}) => (
-  <div
-    id={id}
-    className={[
-      baseClassName,
-      componentClassName,
-      userClassName,
-    ]
-      .filter((e) => e)
-      .join(' ')}
-    style={{
-      ...style,
-      '--blob-color':`var(--${color})`,
-      '--height'    :height,
-      '--opacity'   :opacity,
-      '--width'     :width,
-    }}
-  >
-    <div className="shape-blob" />
-    <div className="shape-blob one" />
-    <div className="shape-blob two" />
-  </div>
-)
-
-AnimatedBlobs.propTypes = {
-  /**
- * The HTML id for this element
- */
-  id:PropTypes.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className:PropTypes.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style:PropTypes.objectOf(PropTypes.string),
-
-  /**
-   * The color of the blobs
-   */
-  color:PropTypes.string,
-
-  /**
-   * The height of the blobs
-   */
-  height:PropTypes.string,
-
-  /**
-   * The width of the blobs
-   */
-  width:PropTypes.string,
-
-  /**
-   * The opacity of the blobs
-   */
-  opacity:PropTypes.string,
-}
-
-AnimatedBlobs.defaultProps = {
-  color  :'background-mesh',
-  height :'200px',
-  width  :'200px',
-  opacity:'0.7',
-}
-
-export default AnimatedBlobs

package/src/ui/a/AnimatedBlobs/index.js

@@ -1 +0,0 @@
-export { default as AnimatedBlobs } from './AnimatedBlobs'

package/src/ui/a/AnimatedBlobs/styles.scss

@@ -1,87 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-
-@keyframes transform {
-  0%,
-  100% {
-    border-radius: 33% 67% 70% 30% / 30% 30% 70% 70%;
-  }
-
-  20% {
-    border-radius: 37% 63% 51% 49% / 37% 65% 35% 63%;
-  }
-
-  40% {
-    border-radius: 36% 64% 64% 36% / 64% 48% 52% 36%;
-  }
-
-  60% {
-    border-radius: 37% 63% 51% 49% / 30% 30% 70% 70%;
-  }
-
-  80% {
-    border-radius: 40% 60% 42% 58% / 41% 51% 49% 59%;
-  }
-}
-@keyframes movement_one {
-  0%,
-  100% {
-    transform: none;
-  }
-
-  50% {
-    transform: translate(50%, 20%) rotateY(10deg) scale(1.2);
-  }
-}
-@keyframes movement_two {
-  0%,
-  500% {
-    transform: none;
-  }
-
-  50% {
-    transform: translate(50%, 20%) rotate(-200deg) scale(1.2);
-  }
-}
-
-.#{bem.$base}.animated-blobs {
-  height: 100%;
-  left: 0;
-  top: 0;
-  width: 100%;
-
-  > .shape-blob {
-    animation:
-      transform 20s ease-in-out infinite both alternate,
-      movement_one 40s ease-in-out infinite both;
-    background: var(--blob-color);
-    border-radius: 30% 50% 20% 40%;
-    height: var(--height);
-    left: 70%;
-    opacity: var(--opacity);
-    position: absolute;
-    top: 50%;
-    width: var(--width);
-  }
-
-  > .shape-blob.one {
-    animation: transform 30s ease-in-out infinite both alternate,
-      movement_two 60s ease-in-out infinite both;
-    height: calc(var(--height) * 2.5);
-    left: -200px;
-    top: -150px;
-    transform: rotate(-180deg);
-    width: calc(var(--width) * 2.5);
-  }
-
-  > .shape-blob.two {
-    animation: transform 30s ease-in-out infinite both alternate,
-      movement_two 60s ease-in-out infinite both;
-    height: calc(var(--height) * 1.75);
-    left: 500px;
-    top: -150px;
-    transform: rotate(-180deg);
-    width: calc(var(--width) * 1.75);
-  }
-}