From 1c081a411a56f5ad921e8a177db27fd5a6fbda78 Mon Sep 17 00:00:00 2001
From: "kristina.spasevska" <kristina.spasevska@deptagency.com>
Date: Wed, 23 Aug 2023 13:33:08 +0200
Subject: [PATCH 1/3] chore(layout): change spacing to gap

---
 .../src/components/Blog/BlogItem/BlogItem.tsx |  4 +--
 .../components/Subscribe.tsx                  |  4 +--
 .../components/BrowseSection/LinkBlock.tsx    |  4 +--
 .../components/ConsentModal/ConsentModal.tsx  |  2 +-
 .../InfiniteScroll/InfiniteScroll.tsx         |  2 +-
 .../docs/src/components/Layout/Blog/Blog.tsx  |  2 +-
 .../Landing/components/Headers/HomeHeader.tsx |  4 +--
 .../components/Headers/SearchHeader.tsx       |  2 +-
 .../docs/src/components/NotFound/NotFound.tsx |  2 +-
 .../src/pages/docs/blogchain/2018/index.tsx   |  2 +-
 .../src/pages/docs/blogchain/2019/index.tsx   |  2 +-
 .../src/pages/docs/blogchain/2021/index.tsx   |  2 +-
 .../src/pages/docs/blogchain/2022/index.tsx   |  2 +-
 .../src/pages/docs/blogchain/2023/index.tsx   |  2 +-
 .../apps/docs/src/pages/docs/build/index.tsx  |  2 +-
 .../docs/src/pages/docs/chainweb/index.tsx    |  2 +-
 .../docs/src/pages/docs/contribute/index.tsx  |  2 +-
 .../apps/docs/src/pages/docs/kadena/index.tsx |  2 +-
 .../docs/src/pages/docs/marmalade/index.tsx   |  2 +-
 packages/apps/docs/src/pages/index.tsx        |  2 +-
 .../Global/FormItemCard/FormItemCard.tsx      |  2 +-
 .../cross-chain-transfer-tracker/index.tsx    |  6 ++--
 .../src/components/Grid/Grid.stories.tsx      | 14 ++++----
 .../src/components/Grid/GridContainer.tsx     |  6 ++--
 .../src/components/Grid/styles.ts             |  4 +--
 .../src/components/Icons/Icon.stories.tsx     |  4 +--
 .../ProductIcons/ProductIcon.stories.tsx      |  4 +--
 .../src/components/Stack/Stack.stories.tsx    | 32 +++++++++----------
 .../src/components/Stack/Stack.ts             |  6 ++--
 .../src/components/Grid/Grid.stories.tsx      | 14 ++++----
 .../react-ui/src/components/Grid/GridRoot.tsx |  6 ++--
 .../src/components/Input/Input.stories.tsx    |  2 +-
 .../Pagination/Pagination.stories.tsx         |  2 +-
 .../src/components/Stack/Stack.stories.tsx    | 32 +++++++++----------
 .../react-ui/src/components/Stack/Stack.tsx   |  6 ++--
 35 files changed, 94 insertions(+), 94 deletions(-)

diff --git a/packages/apps/docs/src/components/Blog/BlogItem/BlogItem.tsx b/packages/apps/docs/src/components/Blog/BlogItem/BlogItem.tsx
index e7faea5036..5118253125 100644
--- a/packages/apps/docs/src/components/Blog/BlogItem/BlogItem.tsx
+++ b/packages/apps/docs/src/components/Blog/BlogItem/BlogItem.tsx
@@ -17,8 +17,8 @@ export const BlogItem: FC<IProps> = ({ item }) => {
   return (
     <li className={blogitem}>
       <Link className={link} href={item.root}>
-        <Stack direction="column" spacing="$3">
-          <Stack alignItems="center" spacing="$2">
+        <Stack direction="column" gap="$3">
+          <Stack alignItems="center" gap="$2">
             <Avatar name={item.author} />
             <Heading as="h4" variant="h6">
               {item.author}
diff --git a/packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx b/packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx
index 3188e3fffc..eff05c9342 100644
--- a/packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx
+++ b/packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx
@@ -22,13 +22,13 @@ export const Subscribe: FC = () => {
 
   return (
     <section data-cy="subscribe">
-      <Stack direction="column" spacing="$sm">
+      <Stack direction="column" gap="$sm">
         <Heading as="h6">Receive important developer updates</Heading>
 
         {!hasSuccess ? (
           <>
             <form>
-              <Stack spacing="$sm">
+              <Stack gap="$sm">
                 <TextField
                   inputProps={{
                     id: 'email',
diff --git a/packages/apps/docs/src/components/BrowseSection/LinkBlock.tsx b/packages/apps/docs/src/components/BrowseSection/LinkBlock.tsx
index 5a2bf7a181..2b847a2e6d 100644
--- a/packages/apps/docs/src/components/BrowseSection/LinkBlock.tsx
+++ b/packages/apps/docs/src/components/BrowseSection/LinkBlock.tsx
@@ -18,9 +18,9 @@ export const LinkBlock: FC<ILinkBlock> = ({ title, subtitle, icon, href }) => {
   return (
     <li className={listItemClass}>
       <Link href={href} className={listItemLinkClass}>
-        <Stack direction="row" spacing="$2">
+        <Stack direction="row" gap="$2">
           <Icon className={iconClass} />
-          <Stack direction="column" spacing={0}>
+          <Stack direction="column" gap={0}>
             <Heading as="h6">{title}</Heading>
             <Text as="span" color="emphasize">
               {subtitle}
diff --git a/packages/apps/docs/src/components/ConsentModal/ConsentModal.tsx b/packages/apps/docs/src/components/ConsentModal/ConsentModal.tsx
index 5a0edb3210..c1ef4946d1 100644
--- a/packages/apps/docs/src/components/ConsentModal/ConsentModal.tsx
+++ b/packages/apps/docs/src/components/ConsentModal/ConsentModal.tsx
@@ -43,7 +43,7 @@ export const ConsentModal: FC = () => {
       <>
         <Text>We are using cookies on this website!</Text>
         <Box marginTop="$10">
-          <Stack spacing="$4">
+          <Stack gap="$4">
             <button
               onClick={handleAccept}
               title="Accept analytics cookies"
diff --git a/packages/apps/docs/src/components/InfiniteScroll/InfiniteScroll.tsx b/packages/apps/docs/src/components/InfiniteScroll/InfiniteScroll.tsx
index 0c49c0f0ff..ff59976765 100644
--- a/packages/apps/docs/src/components/InfiniteScroll/InfiniteScroll.tsx
+++ b/packages/apps/docs/src/components/InfiniteScroll/InfiniteScroll.tsx
@@ -40,7 +40,7 @@ export const InfiniteScroll: FC<IProps> = ({
 
   return (
     <div ref={loadRef}>
-      <Stack justifyContent="center" alignItems="center" spacing="$10">
+      <Stack justifyContent="center" alignItems="center" gap="$10">
         {isLoading && <Loading />}
         {error && (
           <>
diff --git a/packages/apps/docs/src/components/Layout/Blog/Blog.tsx b/packages/apps/docs/src/components/Layout/Blog/Blog.tsx
index 32a407c16a..49625fa790 100644
--- a/packages/apps/docs/src/components/Layout/Blog/Blog.tsx
+++ b/packages/apps/docs/src/components/Layout/Blog/Blog.tsx
@@ -56,7 +56,7 @@ export const Blog: FC<IPageProps> = ({
             {children}
 
             <div className={bottomWrapperClass}>
-              <Grid.Root spacing="$xl" columns={12}>
+              <Grid.Root gap="$xl" columns={12}>
                 <Grid.Item columnSpan={4}>
                   <Stack
                     alignItems="flex-start"
diff --git a/packages/apps/docs/src/components/Layout/Landing/components/Headers/HomeHeader.tsx b/packages/apps/docs/src/components/Layout/Landing/components/Headers/HomeHeader.tsx
index 9514ea65fe..3ee59380a8 100644
--- a/packages/apps/docs/src/components/Layout/Landing/components/Headers/HomeHeader.tsx
+++ b/packages/apps/docs/src/components/Layout/Landing/components/Headers/HomeHeader.tsx
@@ -18,8 +18,8 @@ export const HomeHeader: FC<IProps> = ({ popularPages }) => {
         <Heading as="h1" variant="h2">
           Kadena
         </Heading>
-        <Stack spacing="$2xl" wrap="wrap">
-          <Stack direction="column" spacing="$2xs">
+        <Stack gap="$2xl" wrap="wrap">
+          <Stack direction="column" gap="$2xs">
             <Heading as="h2" variant="h4">
               Build your <GradientText>own</GradientText> Internet
             </Heading>
diff --git a/packages/apps/docs/src/components/Layout/Landing/components/Headers/SearchHeader.tsx b/packages/apps/docs/src/components/Layout/Landing/components/Headers/SearchHeader.tsx
index 2d693bf6be..a03324c30c 100644
--- a/packages/apps/docs/src/components/Layout/Landing/components/Headers/SearchHeader.tsx
+++ b/packages/apps/docs/src/components/Layout/Landing/components/Headers/SearchHeader.tsx
@@ -15,7 +15,7 @@ export const SearchHeader: FC<IProps> = ({ children }) => {
         <Heading as="h1" variant="h2">
           Search spaces
         </Heading>
-        <Stack direction="column" spacing="$2xs">
+        <Stack direction="column" gap="$2xs">
           <Heading as="h2" variant="h4">
             Traditional or the <GradientText>new</GradientText> way
           </Heading>
diff --git a/packages/apps/docs/src/components/NotFound/NotFound.tsx b/packages/apps/docs/src/components/NotFound/NotFound.tsx
index 07249135fd..229015d5b0 100644
--- a/packages/apps/docs/src/components/NotFound/NotFound.tsx
+++ b/packages/apps/docs/src/components/NotFound/NotFound.tsx
@@ -8,7 +8,7 @@ import React, { FC } from 'react';
 export const NotFound: FC = () => {
   return (
     <Stack
-      spacing="$2"
+      gap="$2"
       paddingTop="$20"
       paddingX={0}
       direction="column"
diff --git a/packages/apps/docs/src/pages/docs/blogchain/2018/index.tsx b/packages/apps/docs/src/pages/docs/blogchain/2018/index.tsx
index 2d9c3ddedd..c300134332 100644
--- a/packages/apps/docs/src/pages/docs/blogchain/2018/index.tsx
+++ b/packages/apps/docs/src/pages/docs/blogchain/2018/index.tsx
@@ -9,7 +9,7 @@ import React, { FC } from 'react';
 
 const Home: FC = () => {
   return (
-    <Stack direction="column" spacing="$2xl">
+    <Stack direction="column" gap="$2xl">
       <div>
         <Heading as="h2">BlogChain 2018</Heading>
       </div>
diff --git a/packages/apps/docs/src/pages/docs/blogchain/2019/index.tsx b/packages/apps/docs/src/pages/docs/blogchain/2019/index.tsx
index fc02cdddf1..e62c67db4d 100644
--- a/packages/apps/docs/src/pages/docs/blogchain/2019/index.tsx
+++ b/packages/apps/docs/src/pages/docs/blogchain/2019/index.tsx
@@ -9,7 +9,7 @@ import React, { FC } from 'react';
 
 const Home: FC = () => {
   return (
-    <Stack direction="column" spacing="$2xl">
+    <Stack direction="column" gap="$2xl">
       <div>
         <Heading as="h2">BlogChain 2019</Heading>
       </div>
diff --git a/packages/apps/docs/src/pages/docs/blogchain/2021/index.tsx b/packages/apps/docs/src/pages/docs/blogchain/2021/index.tsx
index 7497e9a96a..107b722ec4 100644
--- a/packages/apps/docs/src/pages/docs/blogchain/2021/index.tsx
+++ b/packages/apps/docs/src/pages/docs/blogchain/2021/index.tsx
@@ -9,7 +9,7 @@ import React, { FC } from 'react';
 
 const Home: FC = () => {
   return (
-    <Stack direction="column" spacing="$2xl">
+    <Stack direction="column" gap="$2xl">
       <div>
         <Heading as="h2">BlogChain 2021</Heading>
       </div>
diff --git a/packages/apps/docs/src/pages/docs/blogchain/2022/index.tsx b/packages/apps/docs/src/pages/docs/blogchain/2022/index.tsx
index 6dcceffff8..d78ead88cc 100644
--- a/packages/apps/docs/src/pages/docs/blogchain/2022/index.tsx
+++ b/packages/apps/docs/src/pages/docs/blogchain/2022/index.tsx
@@ -9,7 +9,7 @@ import React, { FC } from 'react';
 
 const Home: FC = () => {
   return (
-    <Stack direction="column" spacing="$2xl">
+    <Stack direction="column" gap="$2xl">
       <div>
         <Heading as="h2">BlogChain 2022</Heading>
       </div>
diff --git a/packages/apps/docs/src/pages/docs/blogchain/2023/index.tsx b/packages/apps/docs/src/pages/docs/blogchain/2023/index.tsx
index e34bb46d7d..a979f9a18b 100644
--- a/packages/apps/docs/src/pages/docs/blogchain/2023/index.tsx
+++ b/packages/apps/docs/src/pages/docs/blogchain/2023/index.tsx
@@ -9,7 +9,7 @@ import React, { FC } from 'react';
 
 const Home: FC = () => {
   return (
-    <Stack direction="column" spacing="$2xl">
+    <Stack direction="column" gap="$2xl">
       <div>
         <Heading as="h2">BlogChain 2023</Heading>
       </div>
diff --git a/packages/apps/docs/src/pages/docs/build/index.tsx b/packages/apps/docs/src/pages/docs/build/index.tsx
index a7751537f4..07e13e0f96 100644
--- a/packages/apps/docs/src/pages/docs/build/index.tsx
+++ b/packages/apps/docs/src/pages/docs/build/index.tsx
@@ -8,7 +8,7 @@ import { GetStaticProps } from 'next';
 import React, { FC } from 'react';
 
 const Home: FC = () => {
-  return <Stack direction="column" spacing="$2xl"></Stack>;
+  return <Stack direction="column" gap="$2xl"></Stack>;
 };
 
 export const getStaticProps: GetStaticProps = async () => {
diff --git a/packages/apps/docs/src/pages/docs/chainweb/index.tsx b/packages/apps/docs/src/pages/docs/chainweb/index.tsx
index 14d56113df..5dec30d191 100644
--- a/packages/apps/docs/src/pages/docs/chainweb/index.tsx
+++ b/packages/apps/docs/src/pages/docs/chainweb/index.tsx
@@ -9,7 +9,7 @@ import React, { FC } from 'react';
 
 const Home: FC = () => {
   return (
-    <Stack direction="column" spacing="$2xl">
+    <Stack direction="column" gap="$2xl">
       <div>
         <Heading as="h2">Chainweb</Heading>
       </div>
diff --git a/packages/apps/docs/src/pages/docs/contribute/index.tsx b/packages/apps/docs/src/pages/docs/contribute/index.tsx
index bcf35faa1b..9e576769ee 100644
--- a/packages/apps/docs/src/pages/docs/contribute/index.tsx
+++ b/packages/apps/docs/src/pages/docs/contribute/index.tsx
@@ -10,7 +10,7 @@ import React, { FC } from 'react';
 
 const Home: FC = () => {
   return (
-    <Stack direction="column" spacing="$2xl">
+    <Stack direction="column" gap="$2xl">
       <BrowseSection>
         <BrowseSection.LinkBlock
           title="Run a Node"
diff --git a/packages/apps/docs/src/pages/docs/kadena/index.tsx b/packages/apps/docs/src/pages/docs/kadena/index.tsx
index 4b40abc5de..5509c8e1e6 100644
--- a/packages/apps/docs/src/pages/docs/kadena/index.tsx
+++ b/packages/apps/docs/src/pages/docs/kadena/index.tsx
@@ -13,7 +13,7 @@ import React, { FC } from 'react';
 
 const Home: FC = () => {
   return (
-    <Stack direction="column" spacing="$2xl">
+    <Stack direction="column" gap="$2xl">
       <div>
         <Heading as="h2">Welcome to Kadena&apos;s documentation!</Heading>
         <Text>
diff --git a/packages/apps/docs/src/pages/docs/marmalade/index.tsx b/packages/apps/docs/src/pages/docs/marmalade/index.tsx
index 41423d7036..f2c5beb957 100644
--- a/packages/apps/docs/src/pages/docs/marmalade/index.tsx
+++ b/packages/apps/docs/src/pages/docs/marmalade/index.tsx
@@ -9,7 +9,7 @@ import React, { FC } from 'react';
 
 const Home: FC = () => {
   return (
-    <Stack direction="column" spacing="$2xl">
+    <Stack direction="column" gap="$2xl">
       <div>
         <Heading as="h2">Marmalade</Heading>
       </div>
diff --git a/packages/apps/docs/src/pages/index.tsx b/packages/apps/docs/src/pages/index.tsx
index d0e988fda7..bcbeb4ba18 100644
--- a/packages/apps/docs/src/pages/index.tsx
+++ b/packages/apps/docs/src/pages/index.tsx
@@ -64,7 +64,7 @@ const Home: FC<IProps> = ({ popularPages }) => {
             </Stack>
           </Box>
           <Heading as="h4">Browse by Resources</Heading>
-          <Stack direction="column" spacing="$2xl">
+          <Stack direction="column" gap="$2xl">
             <BrowseSection title="General" titleAs="h5" direction="row">
               <BrowseSection.LinkBlock
                 title="Overview of Pact"
diff --git a/packages/apps/tools/src/components/Global/FormItemCard/FormItemCard.tsx b/packages/apps/tools/src/components/Global/FormItemCard/FormItemCard.tsx
index c9779d5e8d..bb2024f7dc 100644
--- a/packages/apps/tools/src/components/Global/FormItemCard/FormItemCard.tsx
+++ b/packages/apps/tools/src/components/Global/FormItemCard/FormItemCard.tsx
@@ -34,7 +34,7 @@ export const FormItemCard: FC<IFormItemCardProps> = ({
   return (
     <div>
       <Card fullWidth disabled={disabled}>
-        <Grid.Root columns={2} spacing="$3xl">
+        <Grid.Root columns={2} gap="$3xl">
           <Grid.Item>
             <Heading as="h5">{heading}</Heading>
           </Grid.Item>
diff --git a/packages/apps/tools/src/pages/transactions/cross-chain-transfer-tracker/index.tsx b/packages/apps/tools/src/pages/transactions/cross-chain-transfer-tracker/index.tsx
index 9314d3abef..d68f05d12f 100644
--- a/packages/apps/tools/src/pages/transactions/cross-chain-transfer-tracker/index.tsx
+++ b/packages/apps/tools/src/pages/transactions/cross-chain-transfer-tracker/index.tsx
@@ -186,16 +186,16 @@ const CrossChainTransferTracker: FC = () => {
         direction="column"
         paddingTop={'$2'}
         paddingBottom={'$10'}
-        spacing={'$6'}
+        gap={'$6'}
       >
-        <Stack direction="column" spacing={'$2'}>
+        <Stack direction="column" gap={'$2'}>
           {' '}
           <Breadcrumbs.Root>
             <Breadcrumbs.Item>{t('Transfer')}</Breadcrumbs.Item>
             <Breadcrumbs.Item>{t('Cross Chain Tracker')}</Breadcrumbs.Item>
           </Breadcrumbs.Root>
           <Stack
-            spacing={'$6'}
+            gap={'$6'}
             justifyContent={'space-between'}
             alignItems={'flex-end'}
           >
diff --git a/packages/libs/react-components/src/components/Grid/Grid.stories.tsx b/packages/libs/react-components/src/components/Grid/Grid.stories.tsx
index 575e89d804..fedb01e69b 100644
--- a/packages/libs/react-components/src/components/Grid/Grid.stories.tsx
+++ b/packages/libs/react-components/src/components/Grid/Grid.stories.tsx
@@ -20,7 +20,7 @@ const meta: Meta<typeof Grid.Container> = {
   title: 'Layout/Grid',
   component: Grid.Container,
   argTypes: {
-    spacing: {
+    gap: {
       options: Object.keys(spacingVariant) as (keyof typeof spacingVariant)[],
       control: { type: 'select' },
     },
@@ -39,11 +39,11 @@ type Story = StoryObj<typeof Grid.Container>;
 export const Primary: Story = {
   name: 'Grid',
   args: {
-    spacing: 'xl',
+    gap: 'xl',
   },
-  render: ({ spacing }) => (
+  render: ({ gap }) => (
     <>
-      <Grid.Container spacing={spacing}>
+      <Grid.Container gap={gap}>
         <Grid.Item>
           <Content>1</Content>
         </Grid.Item>
@@ -109,16 +109,16 @@ export const Primary: Story = {
 export const GridAreas: Story = {
   name: 'GridTemplate areas',
   args: {
-    spacing: 'md',
+    gap: 'md',
     templateRows: '50px 1fr 30px',
     templateColumns: `150px 1fr`,
     templateAreas: `"header header"
                   "nav main"
                   "nav footer"`,
   },
-  render: ({ spacing, templateColumns, templateRows, templateAreas }) => (
+  render: ({ gap, templateColumns, templateRows, templateAreas }) => (
     <Grid.Container
-      spacing={spacing}
+      gap={gap}
       templateAreas={templateAreas}
       templateRows={templateRows}
       templateColumns={templateColumns}
diff --git a/packages/libs/react-components/src/components/Grid/GridContainer.tsx b/packages/libs/react-components/src/components/Grid/GridContainer.tsx
index 4a7bd9125f..59794f1b56 100644
--- a/packages/libs/react-components/src/components/Grid/GridContainer.tsx
+++ b/packages/libs/react-components/src/components/Grid/GridContainer.tsx
@@ -5,7 +5,7 @@ import React, { FC, ReactNode } from 'react';
 
 export interface IGridContainerProps {
   children?: ReactNode;
-  spacing?: VariantProps<typeof BaseContainer>['spacing'];
+  gap?: VariantProps<typeof BaseContainer>['gap'];
   templateRows?: CSSProperties['gridTemplateRows'];
   templateColumns?: CSSProperties['gridTemplateColumns'];
   templateAreas?: CSSProperties['gridTemplateAreas'];
@@ -13,7 +13,7 @@ export interface IGridContainerProps {
 
 const GridContainer: FC<IGridContainerProps> = ({
   children,
-  spacing,
+                                                  gap,
   templateAreas,
   templateRows,
   templateColumns,
@@ -24,7 +24,7 @@ const GridContainer: FC<IGridContainerProps> = ({
     gridTemplateColumns: templateColumns,
   };
   return (
-    <BaseContainer css={styles} spacing={spacing}>
+    <BaseContainer css={styles} gap={gap}>
       {children}
     </BaseContainer>
   );
diff --git a/packages/libs/react-components/src/components/Grid/styles.ts b/packages/libs/react-components/src/components/Grid/styles.ts
index dff27da9c4..f9d360d41b 100644
--- a/packages/libs/react-components/src/components/Grid/styles.ts
+++ b/packages/libs/react-components/src/components/Grid/styles.ts
@@ -36,10 +36,10 @@ export const GridContainer = styled('div', {
   display: 'grid',
   gridTemplateColumns: 'repeat(12, 1fr)',
   defaultVariants: {
-    spacing: '$md',
+    gap: '$md',
   },
   variants: {
-    spacing: spacingVariant,
+    gap: spacingVariant,
   },
 });
 
diff --git a/packages/libs/react-components/src/components/Icons/Icon.stories.tsx b/packages/libs/react-components/src/components/Icons/Icon.stories.tsx
index 2e50cf9e8f..c4abdcaa2d 100644
--- a/packages/libs/react-components/src/components/Icons/Icon.stories.tsx
+++ b/packages/libs/react-components/src/components/Icons/Icon.stories.tsx
@@ -44,13 +44,13 @@ export const Primary: Story = {
     const searchRegexp = new RegExp(icon, 'i');
     return (
       <>
-        <Grid.Container spacing="xl" templateColumns="repeat(6, 1fr)">
+        <Grid.Container gap="xl" templateColumns="repeat(6, 1fr)">
           {Object.entries(SystemIcons)
             .filter(([k]) => searchRegexp.test(k))
             // eslint-disable-next-line @typescript-eslint/naming-convention
             .map(([k, Icon]) => (
               <Grid.Item key={k}>
-                <Stack direction="column" alignItems="center" spacing="xs">
+                <Stack direction="column" alignItems="center" gap="xs">
                   <Icon size={size} />
                   <Text size="sm">System.{k}</Text>
                 </Stack>
diff --git a/packages/libs/react-components/src/components/ProductIcons/ProductIcon.stories.tsx b/packages/libs/react-components/src/components/ProductIcons/ProductIcon.stories.tsx
index 6ab05f4bc4..c4d9541206 100644
--- a/packages/libs/react-components/src/components/ProductIcons/ProductIcon.stories.tsx
+++ b/packages/libs/react-components/src/components/ProductIcons/ProductIcon.stories.tsx
@@ -44,13 +44,13 @@ export const Primary: Story = {
     const searchRegexp = new RegExp(icon, 'i');
     return (
       <>
-        <Grid.Container spacing="xl" templateColumns="repeat(6, 1fr)">
+        <Grid.Container gap="xl" templateColumns="repeat(6, 1fr)">
           {Object.entries(ProductIcons)
             .filter(([k]) => searchRegexp.test(k))
             // eslint-disable-next-line @typescript-eslint/naming-convention
             .map(([k, Icon]) => (
               <Grid.Item key={k}>
-                <Stack direction="column" alignItems="center" spacing="xs">
+                <Stack direction="column" alignItems="center" gap="xs">
                   <Icon size={size} />
                   <Text size="sm">ProductIcons.{k}</Text>
                 </Stack>
diff --git a/packages/libs/react-components/src/components/Stack/Stack.stories.tsx b/packages/libs/react-components/src/components/Stack/Stack.stories.tsx
index a8a38f2a1e..2c9c20e916 100644
--- a/packages/libs/react-components/src/components/Stack/Stack.stories.tsx
+++ b/packages/libs/react-components/src/components/Stack/Stack.stories.tsx
@@ -26,7 +26,7 @@ const meta: Meta<typeof Stack> = {
   title: 'Layout/Stack',
   component: Stack,
   argTypes: {
-    spacing: {
+    gap: {
       options: Object.keys(spacingVariant) as (keyof typeof spacingVariant)[],
       control: { type: 'select' },
     },
@@ -61,12 +61,12 @@ type Story = StoryObj<typeof Stack>;
 export const Horizontal: Story = {
   name: 'Horizontal Stack',
   args: {
-    spacing: 'md',
+    gap: 'md',
     direction: 'row',
   },
-  render: ({ spacing, direction }) => (
+  render: ({ gap, direction }) => (
     <>
-      <Stack spacing={spacing} direction={direction}>
+      <Stack gap={gap} direction={direction}>
         <Item>Item 1</Item>
         <Item>Item 2</Item>
         <Item>Item 3</Item>
@@ -81,12 +81,12 @@ export const Horizontal: Story = {
 export const Vertical: Story = {
   name: 'Vertical Stack',
   args: {
-    spacing: 'md',
+    gap: 'md',
     direction: 'column',
   },
-  render: ({ spacing, direction }) => (
+  render: ({ gap, direction }) => (
     <>
-      <Stack spacing={spacing} direction={direction}>
+      <Stack gap={gap} direction={direction}>
         <Item>Item 1</Item>
         <Item>Item 2</Item>
         <Item>Item 3</Item>
@@ -101,15 +101,15 @@ export const Vertical: Story = {
 export const Centered: Story = {
   name: 'Align Items Center Stack',
   args: {
-    spacing: 'md',
+    gap: 'md',
     direction: 'row',
     alignItems: 'center',
     justifyContent: 'center',
   },
-  render: ({ spacing, direction, alignItems, justifyContent }) => (
+  render: ({ gap, direction, alignItems, justifyContent }) => (
     <>
       <Stack
-        spacing={spacing}
+        gap={gap}
         direction={direction}
         alignItems={alignItems}
         justifyContent={justifyContent}
@@ -128,15 +128,15 @@ export const Centered: Story = {
 export const SpaceBetween: Story = {
   name: 'Space Between Stack',
   args: {
-    spacing: 'md',
+    gap: 'md',
     direction: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
   },
-  render: ({ spacing, direction, alignItems, justifyContent }) => (
+  render: ({ gap, direction, alignItems, justifyContent }) => (
     <>
       <Stack
-        spacing={spacing}
+        gap={gap}
         direction={direction}
         alignItems={alignItems}
         justifyContent={justifyContent}
@@ -155,16 +155,16 @@ export const SpaceBetween: Story = {
 export const Wrapped: Story = {
   name: 'Wrapped Stack',
   args: {
-    spacing: 'md',
+    gap: 'md',
     direction: 'row',
     alignItems: 'center',
     justifyContent: 'flex-start',
     flexWrap: 'wrap',
   },
-  render: ({ spacing, direction, alignItems, justifyContent, flexWrap }) => (
+  render: ({ gap, direction, alignItems, justifyContent, flexWrap }) => (
     <>
       <Stack
-        spacing={spacing}
+        gap={gap}
         direction={direction}
         alignItems={alignItems}
         justifyContent={justifyContent}
diff --git a/packages/libs/react-components/src/components/Stack/Stack.ts b/packages/libs/react-components/src/components/Stack/Stack.ts
index f360982014..c1e48dd8c9 100644
--- a/packages/libs/react-components/src/components/Stack/Stack.ts
+++ b/packages/libs/react-components/src/components/Stack/Stack.ts
@@ -5,7 +5,7 @@ import { styled } from '../../styles/stitches.config';
 import type { VariantProps } from '@stitches/react';
 
 export interface IStackProps {
-  spacing?: VariantProps<typeof Stack>['spacing'];
+  gap?: VariantProps<typeof Stack>['gap'];
   direction?: VariantProps<typeof Stack>['direction'];
   flexWrap?: VariantProps<typeof Stack>['flexWrap'];
   alignItems?: VariantProps<typeof Stack>['alignItems'];
@@ -102,11 +102,11 @@ export const Stack = styled('div', {
     justifyContent: justifyContentVariant,
     alignItems: alignItemsVariant,
     flexWrap: flexWrapVariant,
-    spacing: spacingVariant,
+    gap: spacingVariant,
   },
 
   defaultVariants: {
-    spacing: 'md',
+    gap: 'md',
     direction: 'row',
     justifyContent: 'flex-start',
     alignItems: 'flex-start',
diff --git a/packages/libs/react-ui/src/components/Grid/Grid.stories.tsx b/packages/libs/react-ui/src/components/Grid/Grid.stories.tsx
index dfc56ca668..7ff16d70bb 100644
--- a/packages/libs/react-ui/src/components/Grid/Grid.stories.tsx
+++ b/packages/libs/react-ui/src/components/Grid/Grid.stories.tsx
@@ -14,7 +14,7 @@ const meta: Meta<
   title: 'Layout/Grid',
   component: Grid.Root,
   argTypes: {
-    spacing: {
+    gap: {
       options: Object.keys(gapVariants) as (keyof typeof gapVariants)[],
       control: { type: 'select' },
     },
@@ -57,7 +57,7 @@ type Story = StoryObj<
 export const GridRoot: Story = {
   name: 'Grid',
   args: {
-    spacing: '$xl',
+    gap: '$xl',
     columns: {
       sm: 2,
       md: 4,
@@ -66,9 +66,9 @@ export const GridRoot: Story = {
       xxl: 12,
     },
   },
-  render: ({ spacing, columns }) => (
+  render: ({ gap, columns }) => (
     <>
-      <Grid.Root spacing={spacing} columns={columns}>
+      <Grid.Root gap={gap} columns={columns}>
         {Array.from(new Array(12)).map((empty, i) => (
           <Grid.Item key={i}>
             <div className={ContentClass}>{i}</div>
@@ -104,7 +104,7 @@ export const GridRoot: Story = {
 
 export const GridItem: Story = {
   args: {
-    spacing: '$xl',
+    gap: '$xl',
     columns: 12,
     columnSpan: {
       sm: 2,
@@ -114,9 +114,9 @@ export const GridItem: Story = {
       xxl: 12,
     },
   },
-  render: ({ spacing, columns, columnSpan }) => (
+  render: ({ gap, columns, columnSpan }) => (
     <>
-      <Grid.Root spacing={spacing} columns={columns}>
+      <Grid.Root gap={gap} columns={columns}>
         {Array.from(new Array(12)).map((empty, i) => (
           <Grid.Item key={i} columnSpan={columnSpan}>
             <div className={ContentClass}>{i}</div>
diff --git a/packages/libs/react-ui/src/components/Grid/GridRoot.tsx b/packages/libs/react-ui/src/components/Grid/GridRoot.tsx
index 8d16309737..2a023dfa9c 100644
--- a/packages/libs/react-ui/src/components/Grid/GridRoot.tsx
+++ b/packages/libs/react-ui/src/components/Grid/GridRoot.tsx
@@ -12,7 +12,7 @@ import React, { FC, ReactNode } from 'react';
 export interface IGridRootProps {
   children?: ReactNode;
   columns?: ResponsiveInputType;
-  spacing?: keyof typeof gapVariants;
+  gap?: keyof typeof gapVariants;
 }
 
 const assembleColumnVariants = (
@@ -36,10 +36,10 @@ const assembleColumnVariants = (
 const GridRoot: FC<IGridRootProps> = ({
   children,
   columns,
-  spacing = '$md',
+  gap = '$md',
 }) => {
   const classList = classNames(
-    gapVariants[spacing],
+    gapVariants[gap],
     gridContainerClass,
     columns && assembleColumnVariants(columns),
   );
diff --git a/packages/libs/react-ui/src/components/Input/Input.stories.tsx b/packages/libs/react-ui/src/components/Input/Input.stories.tsx
index d1b1cb81cb..5b3e3b8a8d 100644
--- a/packages/libs/react-ui/src/components/Input/Input.stories.tsx
+++ b/packages/libs/react-ui/src/components/Input/Input.stories.tsx
@@ -105,7 +105,7 @@ export const InlineWithButton: Story = {
     leftIcon: undefined,
   },
   render: ({ leftIcon, onChange }) => (
-    <Stack spacing="$xs" alignItems="stretch">
+    <Stack gap="$xs" alignItems="stretch">
       <Input
         id="inlineInputStory"
         leftIcon={SystemIcon[leftIcon]}
diff --git a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
index 494f230f09..9197c91101 100644
--- a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
+++ b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
@@ -58,7 +58,7 @@ export const Controlled: Story = {
     const [page, setPage] = React.useState(1);
 
     return (
-      <Stack direction="column" spacing="$4">
+      <Stack direction="column" gap="$4">
         <Heading as="h6">Controlled Page State: {page}</Heading>
         <Pagination
           totalPages={totalPages}
diff --git a/packages/libs/react-ui/src/components/Stack/Stack.stories.tsx b/packages/libs/react-ui/src/components/Stack/Stack.stories.tsx
index b1dcd176b9..8170441c8f 100644
--- a/packages/libs/react-ui/src/components/Stack/Stack.stories.tsx
+++ b/packages/libs/react-ui/src/components/Stack/Stack.stories.tsx
@@ -58,7 +58,7 @@ const meta: Meta<typeof Stack> = {
         type: 'select',
       },
     },
-    spacing: {
+    gap: {
       options: spaceOptions,
       control: {
         type: 'select',
@@ -147,12 +147,12 @@ type Story = StoryObj<typeof Stack>;
 export const Horizontal: Story = {
   name: 'Horizontal Stack',
   args: {
-    spacing: '$md',
+    gap: '$md',
     direction: 'row',
   },
-  render: ({ spacing, direction }) => (
+  render: ({ gap, direction }) => (
     <>
-      <Stack spacing={spacing} direction={direction}>
+      <Stack gap={gap} direction={direction}>
         <div className={itemClass}>Item 1</div>
         <div className={itemClass}>Item 2</div>
         <div className={itemClass}>Item 3</div>
@@ -167,12 +167,12 @@ export const Horizontal: Story = {
 export const Vertical: Story = {
   name: 'Vertical Stack',
   args: {
-    spacing: '$md',
+    gap: '$md',
     direction: 'column',
   },
-  render: ({ spacing, direction }) => (
+  render: ({ gap, direction }) => (
     <>
-      <Stack spacing={spacing} direction={direction}>
+      <Stack gap={gap} direction={direction}>
         <div className={itemClass}>Item 1</div>
         <div className={itemClass}>Item 2</div>
         <div className={itemClass}>Item 3</div>
@@ -187,15 +187,15 @@ export const Vertical: Story = {
 export const Centered: Story = {
   name: 'Align Items Center Stack',
   args: {
-    spacing: '$md',
+    gap: '$md',
     direction: 'row',
     alignItems: 'center',
     justifyContent: 'center',
   },
-  render: ({ spacing, direction, alignItems, justifyContent }) => (
+  render: ({ gap, direction, alignItems, justifyContent }) => (
     <>
       <Stack
-        spacing={spacing}
+        gap={gap}
         direction={direction}
         alignItems={alignItems}
         justifyContent={justifyContent}
@@ -214,15 +214,15 @@ export const Centered: Story = {
 export const SpaceBetween: Story = {
   name: 'Space Between Stack',
   args: {
-    spacing: '$md',
+    gap: '$md',
     direction: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
   },
-  render: ({ spacing, direction, alignItems, justifyContent }) => (
+  render: ({ gap, direction, alignItems, justifyContent }) => (
     <>
       <Stack
-        spacing={spacing}
+        gap={gap}
         direction={direction}
         alignItems={alignItems}
         justifyContent={justifyContent}
@@ -241,16 +241,16 @@ export const SpaceBetween: Story = {
 export const Wrapped: Story = {
   name: 'Wrapped Stack',
   args: {
-    spacing: '$md',
+    gap: '$md',
     direction: 'row',
     alignItems: 'center',
     justifyContent: 'flex-start',
     wrap: 'wrap',
   },
-  render: ({ spacing, direction, alignItems, justifyContent, wrap }) => (
+  render: ({ gap, direction, alignItems, justifyContent, wrap }) => (
     <>
       <Stack
-        spacing={spacing}
+        gap={gap}
         direction={direction}
         alignItems={alignItems}
         justifyContent={justifyContent}
diff --git a/packages/libs/react-ui/src/components/Stack/Stack.tsx b/packages/libs/react-ui/src/components/Stack/Stack.tsx
index 9f289da7ae..8235c6a2e8 100644
--- a/packages/libs/react-ui/src/components/Stack/Stack.tsx
+++ b/packages/libs/react-ui/src/components/Stack/Stack.tsx
@@ -24,7 +24,7 @@ export interface IStackProps
   > {
   direction?: Sprinkles['flexDirection'];
   wrap?: Sprinkles['flexWrap'];
-  spacing?: Sprinkles['gap'];
+  gap?: Sprinkles['gap'];
   as?: ElementType;
   children?: React.ReactNode;
 }
@@ -38,7 +38,7 @@ export const Stack = ({
   marginBottom = undefined,
   marginLeft = undefined,
   marginRight = undefined,
-  spacing = undefined,
+  gap = undefined,
   justifyContent = undefined,
   alignItems = undefined,
   wrap = undefined,
@@ -65,7 +65,7 @@ export const Stack = ({
         marginBottom,
         marginLeft,
         marginRight,
-        gap: spacing,
+        gap,
         justifyContent,
         alignItems,
         flexWrap: wrap,

From 8188fc1e510310100f20ffc7a9833c7de65947ca Mon Sep 17 00:00:00 2001
From: "kristina.spasevska" <kristina.spasevska@deptagency.com>
Date: Wed, 23 Aug 2023 13:50:34 +0200
Subject: [PATCH 2/3] chore: run formatter

---
 packages/libs/react-ui/src/components/Grid/GridRoot.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/libs/react-ui/src/components/Grid/GridRoot.tsx b/packages/libs/react-ui/src/components/Grid/GridRoot.tsx
index 2a023dfa9c..57f2e68b23 100644
--- a/packages/libs/react-ui/src/components/Grid/GridRoot.tsx
+++ b/packages/libs/react-ui/src/components/Grid/GridRoot.tsx
@@ -33,11 +33,7 @@ const assembleColumnVariants = (
   ];
 };
 
-const GridRoot: FC<IGridRootProps> = ({
-  children,
-  columns,
-  gap = '$md',
-}) => {
+const GridRoot: FC<IGridRootProps> = ({ children, columns, gap = '$md' }) => {
   const classList = classNames(
     gapVariants[gap],
     gridContainerClass,

From 7a0e5742658a33175120680da8e79b1f47a5401e Mon Sep 17 00:00:00 2001
From: "kristina.spasevska" <kristina.spasevska@deptagency.com>
Date: Wed, 23 Aug 2023 14:08:02 +0200
Subject: [PATCH 3/3] chore: run formatter on all projects

---
 .../libs/react-components/src/components/Grid/GridContainer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/libs/react-components/src/components/Grid/GridContainer.tsx b/packages/libs/react-components/src/components/Grid/GridContainer.tsx
index 59794f1b56..79c1afdd3f 100644
--- a/packages/libs/react-components/src/components/Grid/GridContainer.tsx
+++ b/packages/libs/react-components/src/components/Grid/GridContainer.tsx
@@ -13,7 +13,7 @@ export interface IGridContainerProps {
 
 const GridContainer: FC<IGridContainerProps> = ({
   children,
-                                                  gap,
+  gap,
   templateAreas,
   templateRows,
   templateColumns,